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
​

ChevronUpDown
​

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
​

Signal0
​

Signal1
​

Signal2
​

Signal3
​

Snippets
​

Snowflake
​

SoccerBall
​

SpeakerDown
​

SpeakerHigh
​

SpeakerLow
​

SpeakerOff
​

SpeakerOn
​

SpeakerUp
​

SpeechBubble
​

SpeechBubbleActive
​

SpeechBubbleImportant
​

SquareEllipsis
​

Star
​

StarCircle
​

StarDisabled
​

Stars
​

Stop
​

StopFilled
​

Stopwatch
​

Store
​

StrikeThrough
​

Sun
​

Sunrise
​

Swatch
​

Switch
​

Syringe
​

Tag
​

Temperature
​

TennisBall
​

Terminal
​

Text
​

TextCursor
​

TextInput
​

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.
Tip: Suffix your local assets with @dark to automatically provide a dark theme option, eg: icon.png and [email protected].
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 };
​
// Implicit theme-aware icon
// with 'icon.png' and '[email protected]' in the `assets` folder
const icon = "icon.png";
​
// Explicit theme-aware icon
const icon = { source: { light: "https://example.com/icon-light.png", dark: "https://example.com/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

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	ChevronUpDown	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	Signal0	Signal1
Signal2	Signal3	Snippets
Snowflake	SoccerBall	SpeakerDown
SpeakerHigh	SpeakerLow	SpeakerOff
SpeakerOn	SpeakerUp	SpeechBubble
SpeechBubbleActive	SpeechBubbleImportant	SquareEllipsis
Star	StarCircle	StarDisabled
Stars	Stop	StopFilled
Stopwatch	Store	StrikeThrough
Sun	Sunrise	Swatch
Switch	Syringe	Tag
Temperature	TennisBall	Terminal
Text	TextCursor	TextInput
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`