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.

For design guidelines and all interactive states, see the Icons design page.

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. Defaults to 24, from Lucide's default attributes.

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.

Internal usage

Cherry renders this same Icon component inside its own form controls, so their glyphs stay consistent with any icons you add yourself: the checkbox check mark in Input uses Check, the dropdown arrow in Select uses ChevronDown, and the calendar glyph on date and time inputs uses CalendarDays. These are colored with the theme's primary color through CSS (currentColor), so they follow the active palette in light and dark mode.

View Source