Luke UI

Icon

SVG icon component backed by the generated spritesheet.

SourceView as MarkdownEdit on GitHub

Icon renders a symbol from the Luke UI spritesheet. Provider supplies its URL.

See Iconography for available icons, sizing, colour, and setup.

Icon: Basic
Loading Icon: Basic example

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
Loading Icon: Custom example

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.

API

IconProps

Prop

Type

CreateIconOptions

Prop

Type

CustomIconProps

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 iconAccessibilityAPIIconPropsCreateIconOptionsCustomIconProps