Icons

Cherry uses Lucide, an open-source icon set with over 1,500 icons drawn on a consistent 24x24 grid with a 2px rounded stroke. Leaning on one primary set keeps iconography coherent across your interface, and the outline style pairs naturally with Cherry's borders and typography.

Lucide icons inherit the current text color, so they adapt to light and dark mode automatically along with the component they sit in.

Where icons appear

Several Cherry components ship with built-in Lucide icons:

• Accordion - the rotating chevron (ChevronDown)
• Modal - the close button (X)
• Toast - a per-status icon (CircleCheck, CircleX, TriangleAlert, Info) plus the dismiss button (X)
• Password - the visibility toggle (Eye, EyeOff)
• ThemeToggle - the sun and moon (Sun, MoonStar)
• Dropzone / AvatarDropzone - the drop-area glyph, customizable via the $icon prop (Dropzone defaults to FileUp, AvatarDropzone to User); Dropzone's file thumbnails also use File and X
• Input - the checkbox check mark (Check) and the calendar glyph on date and time inputs (CalendarDays)
• Select - the dropdown arrow (ChevronDown)
• IconButton - accepts any icon as its content

Choosing icons

Browse the full set at lucide.dev/icons. Icons are referenced by their PascalCase name (for example Settings, Trash2, ImageUp). In code, render them with the Icon component; designers can use the official Lucide Figma plugin to place the same icons in mockups.

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

<Icon name="Heart" />;