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

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 [e-mail].

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: Image.Mask.Circle };

// Implicit theme-aware icon
// with 'icon.png' and '[e-mail]' 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

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 { 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 { 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 { List } from "@raycast/api";

export default function Command() {
  return (
    <List>
      <List.Item title="Asset" icon={{ source: "avatar.png" }} />
    </List>
  );
}