# Icon
> Cherry Icon component - renders any Lucide icon by name with color, size, and accessibility control.
Source: https://cherry.al/code/icon
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Icon
The Icon component renders any icon from the [Lucide](https://lucide.dev) 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](/icons) design page.
```jsx
import React from "react";
import { Icon } from "cherry-styled-components";
export default function Page() {
return ;
}
```
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:
```html
```
If the given name does not match a Lucide icon, the component renders nothing.
## Properties
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.
Icon color. Defaults to the inherited text color.
Icon size in pixels. Defaults to `24`, from Lucide's default attributes.
Class name applied to the rendered SVG.
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](/code/input) uses `Check`, the dropdown arrow in [Select](/code/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.