AI Assistant

Icon

The Icon component renders any icon from the Lucide icon set by name. It is the same component Cherry uses internally (for example in Dropzone tiles and the Modal close button), and it powers the $icon props on components like Dropzone and AvatarDropzone.

import React from "react";
import { Icon } from "cherry-styled-components";

export default function Page() {
  return <Icon name="Cherry" size={24} />;
}

Icons are decorative by default: without an aria-label they render with aria-hidden, so screen readers skip them. Pass an aria-label to make an icon meaningful; it then gets role="img" and the label is announced:

<Icon name="TriangleAlert" color="#ef4444" aria-label="Warning" />

If the given name does not match a Lucide icon, the component renders nothing.

Properties

nameIconPropsrequired

Name of the Lucide icon to render, e.g. "Cherry" or "FileUp". The exported IconProps type is the string union of all Lucide icon names.

colorstring

Icon color. Defaults to the inherited text color.

sizenumber

Icon size in pixels.

classNamestring

Class name applied to the rendered SVG.

aria-labelstring

Accessible label. When set, the icon gets role="img" and is announced by screen readers; when omitted, the icon is aria-hidden.

ThemeToggle PreviousTabsNext
GitHubDiscord