# Icon (/components/visuals/icon)
`Icon` renders a symbol from the generated Luke UI spritesheet. It needs an
`IconSpritesheetProvider` ancestor so it can resolve the spritesheet URL.
To find an icon, set its size or colour, or set up the spritesheet, see
[Iconography](/docs/iconography).
apps/docs/src/examples/icon/basic.tsx
```tsx
import { Icon } from '@luke-ui/react/icon';
export default () => {
return ;
};
```
## Create a custom icon [#create-a-custom-icon]
Use `createIcon` for a one-off icon that is not in the generated spritesheet. It returns a component
with the same sizing and accessibility behaviour as `Icon`.
apps/docs/src/examples/icon/custom.tsx
```tsx
import { createIcon } from '@luke-ui/react/icon';
const HeartIcon = createIcon({
path: (
),
});
export default () => {
return ;
};
```
## Accessibility [#accessibility]
Pass `title` when an icon conveys meaning without adjacent text, such as a standalone status icon.
`Icon` then exposes it to assistive technology with `role="img"`. When `title` is omitted, the icon
is decorative.
Read [Iconography](/docs/iconography#accessibility) for decorative and informative examples.
## Related components [#related-components]
Use [Emoji](/components/typography/emoji) when the visual content is an emoji that needs an
accessible label.
## API [#api]
### IconProps [#iconprops]
### CreateIconOptions [#createiconoptions]
### CustomIconProps [#customiconprops]
### IconSpritesheetProviderProps [#iconspritesheetproviderprops]