Icons & Images

Search…
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.
​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 }
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>
  );
}
Colors
Navigation
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