Icons & Images
List of built-in icons that can be used for actions or list items.
import { Icon, List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="Icon" icon={Icon.Circle} />
</List>
);
}
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
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.
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>
);
}
Name | Value |
---|---|
Circle | "circle" |
RoundedRectangle | "roundedRectangle" |
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]
.// 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" } };
Property | Description | Type |
---|---|---|
source* | ||
fallback | ||
mask | ||
tintColor |
An icon as it's used in the Finder.
import { List } from "@raycast/api";
export default function Command() {
return (
<List>
<List.Item title="File icon" icon={{ fileIcon: __filename }} />
</List>
);
}
Property | Description | Type |
---|---|---|
fileIcon* | The path to a file or folder to get its icon from. | string |
ImageLike: URL | Asset | Icon | FileIcon | Image;
Union type for the supported image types.
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: URL | Asset | Icon | { light: URL | Asset; dark: URL | Asset }
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.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>
);
}