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
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
BulletPoints
BullsEye
Buoy
Calculator
Calendar
Camera
Car
Cart
Cd
Center
Check
CheckCircle
Checkmark
ChessPiece
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
Circle
CircleEllipsis
CircleFilled
CircleProgress
CircleProgress100
CircleProgress25
CircleProgress50
CircleProgress75
ClearFormatting
Clipboard
Clock
Cloud
CloudLightning
CloudRain
CloudSnow
CloudSun
Code
CodeBlock
Cog
Coin
Coins
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
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
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
Patch
Pause
PauseFilled
Pencil
Person
PersonCircle
Phone
PhoneRinging
PieChart
Pill
Pin
PinDisabled
Play
PlayFilled
Plug
Plus
PlusCircle
PlusCircleFilled
PlusMinusDivideMultiply
Power
Print
QuestionMark
QuestionMarkCircle
QuotationMarks
QuoteBlock
Racket
Raindrop
RaycastLogoNeg
RaycastLogoPos
Receipt
Redo
RemovePerson
Repeat
Reply
Rewind
RewindFilled
Rocket
Rosette
RotateAntiClockwise
RotateClockwise
Ruler
SaveDocument
Shield
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

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.
fallback
Image.Fallback image, in case source can't be loaded.
mask
A Image.Mask to apply to the image.
tintColor
A Color.ColorLike to tint all the non-transparent pixels of the image.

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 }
A fallback Image that will be displayed in case the source image cannot be loaded. Can be either a local file resource, a built-in Icon, a single emoji, or a theme-aware asset. Any specified mask or tintColor will also apply to the fallback image.

Example

import { Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item
title="URL Source With Asset Fallback"
icon={{
source: "https://raycast.com/uploads/avatar.png",
fallback: "default-avatar.png",
}}
/>
</List>
);
}

Image.URL

Image is a string representing a URL.

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>
);
}

Image.Asset

Image is a string representing an asset from the assets/ folder

Example

import { Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="Asset" icon={{ source: "avatar.png" }} />
</List>
);
}
Last modified 1mo ago
Copy link
Edit on GitHub
On this page
API Reference
Icon
Image.Mask
Types
Image
FileIcon
Image.ImageLike
Image.Source
Image.Fallback
Image.URL
Image.Asset