Icons & Images

API Reference
Icon
List of built-in icons that can be used for actions or list items.
Example
import { Icon, List } from "@raycast/api";
​
export default function Command() {
  return (
    <List>
      <List.Item title="Icon" icon={Icon.Circle} />
    </List>
  );
}
Enumeration members
​

AddPerson
​

Airplane
​

AirplaneFilled
​

AirplaneLanding
​

AirplaneTakeoff
​

Airpods
​

Alarm
​

AlarmRinging
​

AlignCentre
​

AlignLeft
​

AlignRight
​

AmericanFootball
​

Anchor
​

AppWindow
​

AppWindowGrid2x2
​

AppWindowGrid3x3
​

AppWindowList
​

AppWindowSidebarLeft
​

AppWindowSidebarRight
​

ArrowClockwise
​

ArrowCounterClockwise
​

ArrowDown
​

ArrowDownCircle
​

ArrowDownCircleFilled
​

ArrowLeft
​

ArrowLeftCircle
​

ArrowLeftCircleFilled
​

ArrowNe
​

ArrowRight
​

ArrowRightCircle
​

ArrowRightCircleFilled
​

ArrowUp
​

ArrowUpCircle
​

ArrowUpCircleFilled
​

ArrowsContract
​

ArrowsExpand
​

AtSymbol
​

BandAid
​

BankNote
​

BarChart
​

BarCode
​

BathTub
​

Battery
​

BatteryCharging
​

BatteryDisabled
​

Bell
​

BellDisabled
​

Bike
​

Binoculars
​

Bird
​

BlankDocument
​

Bluetooth
​

Boat
​

Bold
​

Bolt
​

BoltDisabled
​

Book
​

Bookmark
​

Box
​

Brush
​

Bubble
​

Bug
​

Building
​

BulletPoints
​

BullsEye
​

Buoy
​

Calculator
​

Calendar
​

Camera
​

Car
​

Cart
​

Cd
​

Center
​

Check
​

CheckCircle
​

CheckRosette
​

Checkmark
​

ChessPiece
​

ChevronDown
​

ChevronDownSmall
​

ChevronLeft
​

ChevronLeftSmall
​

ChevronRight
​

ChevronRightSmall
​

ChevronUp
​

ChevronUpSmall
​

Circle
​

CircleEllipsis
​

CircleFilled
​

CircleProgress
​

CircleProgress100
​

CircleProgress25
​

CircleProgress50
​

CircleProgress75
​

ClearFormatting
​

Clipboard
​

Clock
​

Cloud
​

CloudLightning
​

CloudRain
​

CloudSnow
​

CloudSun
​

Code
​

CodeBlock
​

Cog
​

Coin
​

Coins
​

CommandSymbol
​

Compass
​

ComputerChip
​

Contrast
​

CopyClipboard
​

CreditCard
​

CricketBall
​

Crop
​

Crown
​

Crypto
​

DeleteDocument
​

Desktop
​

Dna
​

Document
​

Dot
​

Download
​

EditShape
​

Eject
​

Ellipsis
​

Emoji
​

Envelope
​

Eraser
​

ExclamationMark
​

Exclamationmark
​

Exclamationmark2
​

Exclamationmark3
​

Eye
​

EyeDisabled
​

EyeDropper
​

Female
​

FilmStrip
​

Filter
​

Finder
​

Fingerprint
​

Flag
​

Folder
​

Footprints
​

Forward
​

ForwardFilled
​

FountainTip
​

FullSignal
​

GameController
​

Gauge
​

Gear
​

Geopin
​

Germ
​

Gift
​

Glasses
​

Globe
​

Goal
​

Hammer
​

HardDrive
​

Hashtag
​

Headphones
​

Heart
​

HeartDisabled
​

Heartbeat
​

Highlight
​

Hourglass
​

House
​

Image
​

Important
​

Info
​

Italics
​

Key
​

Keyboard
​

Layers
​

Leaderboard
​

Leaf
​

LevelMeter
​

LightBulb
​

LightBulbOff
​

LineChart
​

Link
​

List
​

Livestream
​

LivestreamDisabled
​

Lock
​

LockDisabled
​

LockUnlocked
​

Logout
​

Lorry
​

Lowercase
​

MagnifyingGlass
​

Male
​

Map
​

Mask
​

Maximize
​

MedicalSupport
​

Megaphone
​

MemoryChip
​

MemoryStick
​

Message
​

Microphone
​

MicrophoneDisabled
​

Minimize
​

Minus
​

MinusCircle
​

MinusCircleFilled
​

Mobile
​

Monitor
​

Moon
​

Mountain
​

Mouse
​

Multiply
​

Music
​

Network
​

NewDocument
​

NewFolder
​

Paperclip
​

Paragraph
​

Patch
​

Pause
​

PauseFilled
​

Pencil
​

Person
​

PersonCircle
​

PersonLines
​

Phone
​

PhoneRinging
​

PieChart
​

Pill
​

Pin
​

PinDisabled
​

Play
​

PlayFilled
​

Plug
​

Plus
​

PlusCircle
​

PlusCircleFilled
​

PlusMinusDivideMultiply
​

PlusSquare
​

PlusTopRightSquare
​

Power
​

Print
​

QuestionMark
​

QuestionMarkCircle
​

QuotationMarks
​

QuoteBlock
​

Racket
​

Raindrop
​

RaycastLogoNeg
​

RaycastLogoPos
​

Receipt
​

Redo
​

RemovePerson
​

Repeat
​

Reply
​

Rewind
​

RewindFilled
​

Rocket
​

Rosette
​

RotateAntiClockwise
​

RotateClockwise
​

Ruler
​

SaveDocument
​

Shield
​

ShortParagraph
​

Shuffle
​

Sidebar
​

Signal1
​

Signal2
​

Signal3
​

Snippets
​

Snowflake
​

SoccerBall
​

SpeakerDown
​

SpeakerHigh
​

SpeakerLow
​

SpeakerOff
​

SpeakerOn
​

SpeakerUp
​

SpeechBubble
​

SpeechBubbleActive
​

SpeechBubbleImportant
​

Star
​

StarCircle
​

StarDisabled
​

Stars
​

Stop
​

StopFilled
​

Stopwatch
​

Store
​

StrikeThrough
​

Sun
​

Sunrise
​

Swatch
​

Switch
​

Syringe
​

Tag
​

Temperature
​

TennisBall
​

Terminal
​

Text
​

TextCursor
​

Torch
​

Train
​

Trash
​

Tray
​

Tree
​

Trophy
​

TwoPeople
​

Umbrella
​

Underline
​

Undo
​

Upload
​

Uppercase
​

Video
​

Wallet
​

Wand
​

Warning
​

Weights
​

Wifi
​

WifiDisabled
​

Window
​

WrenchScrewdriver
​

WristWatch
​

XMarkCircle
​

XMarkCircleFilled
​

XMarkTopRightSquare
Image.Mask
Available masks that can be used to change the shape of an image.
Can be handy to shape avatars or other items in a list.
Example
import { Image, List } from "@raycast/api";
​
export default function Command() {
  return (
    <List>
      <List.Item
        title="Icon"
        icon={{
          source: "https://raycast.com/uploads/avatar.png",
          mask: Image.Mask.Circle,
        }}
      />
    </List>
  );
}
Enumeration members
Name
Value
Circle
"circle"
RoundedRectangle
"roundedRectangle"
Types
Image
Display different types of images, including network images or bundled assets.
Apply image transforms to the source, such as a mask or a tintColor.
Example
// Built-in icon
const icon = Icon.Eye;
​
// Built-in icon with tint color
const tintedIcon = { source: Icon.Bubble, tintColor: Color.Red };
​
// Bundled asset with circular mask
const avatar = { source: "avatar.png", mask: ImageMask.Circle };
​
// Theme-aware icon
const icon = { source: { light: "icon-light.png", dark: "icon-dark.png" } };
Properties
Property
Description
Type
source*
The Image.Source of the image.
​Image.Source​
fallback
​Image.Fallback image, in case source can't be loaded.
​Image.Fallback​
mask
A Image.Mask to apply to the image.
​Image.Mask​
tintColor
A Color.ColorLike to tint all the non-transparent pixels of the image.
​Color.ColorLike​
FileIcon
An icon as it's used in the Finder.
Example
import { List } from "@raycast/api";
​
export default function Command() {
  return (
    <List>
      <List.Item title="File icon" icon={{ fileIcon: __filename }} />
    </List>
  );
}
Properties
Property
Description
Type
fileIcon*
The path to a file or folder to get its icon from.
string
Image.ImageLike
ImageLike: URL | Asset | Icon | FileIcon | Image;
Union type for the supported image types.
Example
import { Icon, Image, List } from "@raycast/api";
​
export default function Command() {
  return (
    <List>
      <List.Item title="URL" icon="https://raycast.com/uploads/avatar.png" />
      <List.Item title="Asset" icon="avatar.png" />
      <List.Item title="Icon" icon={Icon.Circle} />
      <List.Item title="FileIcon" icon={{ fileIcon: __filename }} />
      <List.Item
        title="Image"
        icon={{
          source: "https://raycast.com/uploads/avatar.png",
          mask: Image.Mask.Circle,
        }}
      />
    </List>
  );
}
Image.Source
Image.Source: URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }
The source of an Image. Can be either a remote URL, a local file resource, a built-in Icon or a single emoji.
For consistency, it's best to use the built-in Icon in lists, the Action Panel, and other places. If a specific icon isn't built-in, you can reference custom ones from the assets folder of the extension by file name, e.g. my-icon.png. Alternatively, you can reference an absolute HTTPS URL that points to an image or use an emoji. You can also specify different remote or local assets for light and dark theme.
Example
import { Icon, List } from "@raycast/api";
​
export default function Command() {
  return (
    <List>
      <List.Item title="URL" icon={{ source: "https://raycast.com/uploads/avatar.png" }} />
      <List.Item title="Asset" icon={{ source: "avatar.png" }} />
      <List.Item title="Icon" icon={{ source: Icon.Circle }} />
      <List.Item
        title="Theme"
        icon={{
          source: {
            light: "https://raycast.com/uploads/avatar.png",
            dark: "https://raycast.com/uploads/avatar.png",
          },
        }}
      />
    </List>
  );
}
Image.Fallback
Image.Fallback: Asset | Icon | { light: Asset; dark: Asset }

AddPerson	Airplane	AirplaneFilled
AirplaneLanding	AirplaneTakeoff	Airpods
Alarm	AlarmRinging	AlignCentre
AlignLeft	AlignRight	AmericanFootball
Anchor	AppWindow	AppWindowGrid2x2
AppWindowGrid3x3	AppWindowList	AppWindowSidebarLeft
AppWindowSidebarRight	ArrowClockwise	ArrowCounterClockwise
ArrowDown	ArrowDownCircle	ArrowDownCircleFilled
ArrowLeft	ArrowLeftCircle	ArrowLeftCircleFilled
ArrowNe	ArrowRight	ArrowRightCircle
ArrowRightCircleFilled	ArrowUp	ArrowUpCircle
ArrowUpCircleFilled	ArrowsContract	ArrowsExpand
AtSymbol	BandAid	BankNote
BarChart	BarCode	BathTub
Battery	BatteryCharging	BatteryDisabled
Bell	BellDisabled	Bike
Binoculars	Bird	BlankDocument
Bluetooth	Boat	Bold
Bolt	BoltDisabled	Book
Bookmark	Box	Brush
Bubble	Bug	Building
BulletPoints	BullsEye	Buoy
Calculator	Calendar	Camera
Car	Cart	Cd
Center	Check	CheckCircle
CheckRosette	Checkmark	ChessPiece
ChevronDown	ChevronDownSmall	ChevronLeft
ChevronLeftSmall	ChevronRight	ChevronRightSmall
ChevronUp	ChevronUpSmall	Circle
CircleEllipsis	CircleFilled	CircleProgress
CircleProgress100	CircleProgress25	CircleProgress50
CircleProgress75	ClearFormatting	Clipboard
Clock	Cloud	CloudLightning
CloudRain	CloudSnow	CloudSun
Code	CodeBlock	Cog
Coin	Coins	CommandSymbol
Compass	ComputerChip	Contrast
CopyClipboard	CreditCard	CricketBall
Crop	Crown	Crypto
DeleteDocument	Desktop	Dna
Document	Dot	Download
EditShape	Eject	Ellipsis
Emoji	Envelope	Eraser
ExclamationMark	Exclamationmark	Exclamationmark2
Exclamationmark3	Eye	EyeDisabled
EyeDropper	Female	FilmStrip
Filter	Finder	Fingerprint
Flag	Folder	Footprints
Forward	ForwardFilled	FountainTip
FullSignal	GameController	Gauge
Gear	Geopin	Germ
Gift	Glasses	Globe
Goal	Hammer	HardDrive
Hashtag	Headphones	Heart
HeartDisabled	Heartbeat	Highlight
Hourglass	House	Image
Important	Info	Italics
Key	Keyboard	Layers
Leaderboard	Leaf	LevelMeter
LightBulb	LightBulbOff	LineChart
Link	List	Livestream
LivestreamDisabled	Lock	LockDisabled
LockUnlocked	Logout	Lorry
Lowercase	MagnifyingGlass	Male
Map	Mask	Maximize
MedicalSupport	Megaphone	MemoryChip
MemoryStick	Message	Microphone
MicrophoneDisabled	Minimize	Minus
MinusCircle	MinusCircleFilled	Mobile
Monitor	Moon	Mountain
Mouse	Multiply	Music
Network	NewDocument	NewFolder
Paperclip	Paragraph	Patch
Pause	PauseFilled	Pencil
Person	PersonCircle	PersonLines
Phone	PhoneRinging	PieChart
Pill	Pin	PinDisabled
Play	PlayFilled	Plug
Plus	PlusCircle	PlusCircleFilled
PlusMinusDivideMultiply	PlusSquare	PlusTopRightSquare
Power	Print	QuestionMark
QuestionMarkCircle	QuotationMarks	QuoteBlock
Racket	Raindrop	RaycastLogoNeg
RaycastLogoPos	Receipt	Redo
RemovePerson	Repeat	Reply
Rewind	RewindFilled	Rocket
Rosette	RotateAntiClockwise	RotateClockwise
Ruler	SaveDocument	Shield
ShortParagraph	Shuffle	Sidebar
Signal1	Signal2	Signal3
Snippets	Snowflake	SoccerBall
SpeakerDown	SpeakerHigh	SpeakerLow
SpeakerOff	SpeakerOn	SpeakerUp
SpeechBubble	SpeechBubbleActive	SpeechBubbleImportant
Star	StarCircle	StarDisabled
Stars	Stop	StopFilled
Stopwatch	Store	StrikeThrough
Sun	Sunrise	Swatch
Switch	Syringe	Tag
Temperature	TennisBall	Terminal
Text	TextCursor	Torch
Train	Trash	Tray
Tree	Trophy	TwoPeople
Umbrella	Underline	Undo
Upload	Uppercase	Video
Wallet	Wand	Warning
Weights	Wifi	WifiDisabled
Window	WrenchScrewdriver	WristWatch
XMarkCircle	XMarkCircleFilled	XMarkTopRightSquare

Property	Description	Type
source*	The Image.Source of the image.	`Image.Source`
fallback	Image.Fallback image, in case `source` can't be loaded.	`Image.Fallback`
mask	A Image.Mask to apply to the image.	`Image.Mask`
tintColor	A Color.ColorLike to tint all the non-transparent pixels of the image.	`Color.ColorLike`