Ask or search…
Comment on page


Icon to represent an avatar when you don't have one. The generated avatar will be generated from the initials of the name and have a colorful but consistent background.
Avatar Icon example


function getAvatarIcon(
name: string,
options?: {
background?: string;
gradient?: boolean;
): Image.Asset;
  • name is a string of the subject's name.
  • options.background is a hexadecimal representation of a color to be used as the background color. By default, the hook will pick a random but consistent (eg. the same name will the same color) color from a set handpicked to nicely match Raycast.
  • options.gradient is a boolean to choose whether the background should have a slight gradient or not. By default, it will.
Returns an Image.Asset that can be used where Raycast expects them.


import { List } from "@raycast/api";
import { getAvatarIcon } from "@raycast/utils";
export default function Command() {
return (
<List.Item icon={getAvatarIcon("John Doe")} title="John Doe" />