Icons & Images

Search…
Icons & Images
API Reference
Icon
List of built-in icons that can be used for actions or list items.
Example
1
import { Icon, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item title="Icon" icon={Icon.Circle} />
7
    </List>
8
  );
9
}
Copied!
Enumeration members
Name
Image
ArrowClockwise
​
​
TwoArrowsClockwise
​
​
ArrowRight
​
​
Binoculars
​
​
Bubble
​
​
Calendar
​
​
Checkmark
​
​
ChevronDown
​
​
ChevronUp
​
​
Circle
​
​
Clipboard
​
​
Clock
​
​
Desktop
​
​
Document
​
​
Dot
​
​
Download
​
​
Envelope
​
​
ExclamationMark
​
​
Eye
​
​
EyeSlash
​
​
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
1
import { Image, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item
7
        title="Icon"
8
        icon={{
9
          source: "https://raycast.com/uploads/avatar.png",
10
          mask: Image.Mask.Circle,
11
        }}
12
      />
13
    </List>
14
  );
15
}
Copied!
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
1
// Built-in icon
2
const icon = Icon.Eye;
3
​
4
// Built-in icon with tint color
5
const tintedIcon = { source: Icon.Bubble, tintColor: Color.Red };
6
​
7
// Bundled asset with circular mask
8
const avatar = { source: "avatar.png", mask: ImageMask.Circle };
9
​
10
// Theme-aware icon
11
const icon = { source: { light: "icon-light.png", dark: "icon-dark.png" } };
Copied!
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
1
import { List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item title="File icon" icon={{ fileIcon: __filename }} />
7
    </List>
8
  );
9
}
Copied!
Properties
Property
Description
Type
fileIcon*
The path to a file or folder to get its icon from.
string
Image.ImageLike
1
ImageLike: URL | Asset | Icon | FileIcon | Image;
Copied!
Union type for the supported image types.
Example
1
import { Icon, Image, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item title="URL" icon="https://raycast.com/uploads/avatar.png" />
7
      <List.Item title="Asset" icon="avatar.png" />
8
      <List.Item title="Icon" icon={Icon.Circle} />
9
      <List.Item title="FileIcon" icon={{ fileIcon: __filename }} />
10
      <List.Item
11
        title="Image"
12
        icon={{
13
          source: "https://raycast.com/uploads/avatar.png",
14
          mask: Image.Mask.Circle,
15
        }}
16
      />
17
    </List>
18
  );
19
}
Copied!
Image.Source
1
Image.Source: URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }
Copied!
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
1
import { Icon, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item
7
        title="URL"
8
        icon={{ source: "https://raycast.com/uploads/avatar.png" }}
9
      />
10
      <List.Item title="Asset" icon={{ source: "avatar.png" }} />
11
      <List.Item title="Icon" icon={{ source: Icon.Circle }} />
12
      <List.Item
13
        title="Theme"
14
        icon={{
15
          source: {
16
            light: "https://raycast.com/uploads/avatar.png",
17
            dark: "https://raycast.com/uploads/avatar.png",
18
          },
19
        }}
20
      />
21
    </List>
22
  );
23
}
Copied!
Image.Fallback
1
Image.Fallback: Asset | Icon | { light: Asset; dark: Asset }
Copied!
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
1
import { Icon, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item
7
        title="URL Source With Asset Fallback"
8
        icon={{
9
          source: "https://raycast.com/uploads/avatar.png",
10
          fallback: "default-avatar.png",
11
        }}
12
      />
13
    </List>
14
  );
15
}
Copied!
Image.URL
Image is a string representing a URL.
Example
1
import { Icon, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item
7
        title="URL"
8
        icon={{ source: "https://raycast.com/uploads/avatar.png" }}
9
      />
10
    </List>
11
  );
12
}
Copied!
Image.Asset
Image is a string representing an asset from the assets/ folder
Example
1
import { Icon, List } from "@raycast/api";
2
​
3
export default function Command() {
4
  return (
5
    <List>
6
      <List.Item title="Asset" icon={{ source: "avatar.png" }} />
7
    </List>
8
  );
9
}
Copied!
Colors
Navigation
Last modified 2d ago
Copy link
Edit on GitHub
Contents