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. Sticking to a single set keeps iconography coherent across your interface, and the outline style pairs naturally with Cherry's borders and typography.

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 - the dismiss button (X)
• Password - the visibility toggle (Eye, EyeOff)
• ThemeToggle - the sun and moon (Sun, MoonStar)
• Dropzone / AvatarDropzone - the upload glyphs, customizable via the $icon prop
• 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.