Luke UI
GitHub repository

Icon

SVG icon component backed by the generated spritesheet.

StorybookSourceView as MarkdownEdit on GitHub

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.

Icon — Basic
Open in playground

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.

Icon — Custom
Open in playground
Add to favourites

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 for decorative and informative examples.

Use Emoji when the visual content is an emoji that needs an accessible label.

API

IconProps

Prop

Type

CreateIconOptions

Prop

Type

CustomIconProps

Prop

Type

IconSpritesheetProviderProps

Prop

Type

Text

Styled text with semantic typography styles and colour roles.

Button primitive

Lower-level button styles and behaviour for custom control layouts.

On this page

Create a custom iconAccessibilityRelated componentsAPIIconPropsCreateIconOptionsCustomIconPropsIconSpritesheetProviderProps