Interface icons
Use search. Enumerate every supported name with lumenIconNames.
Data displayReact Native
Icon
Display the complete shared interface and brand catalog, with platform-native escape hatches.
Native example
Use Icon
Prefer a generated Lumen name when an interface or brand icon should remain consistent across platforms. Use an SF Symbol, ImageVector, or React Native graphic component when the operating system or product owns the artwork.
View verified React Native runtime capture
<LumenIcon
name="search"
label="Search"
size="md"
/>
<LumenIcon name="brand:github" label="GitHub" />React Native icon catalog
Choose an icon name
Search the visual catalogs, copy the displayed Lumen name, then use the React Native spelling below. The package includes both catalogs without another native dependency.
Reference
Public API
The primary shared and platform-specific options exposed by LumenIcon.
| API | Values or type | Default | Description |
|---|---|---|---|
| name or icon | LumenIconName or LumenIconGraphic | Exactly one required | Selects a generated catalog icon or a platform-specific custom graphic. |
| label | String? | nil | Names a meaningful icon for assistive technology. |
| size | sm · md · lg | md | Uses a 16, 20, or 24 unit icon size. |
| color | Native color | ink | Overrides the semantic icon color. |
Native behavior
Design and accessibility
When to use it
Prefer a generated Lumen name when an interface or brand icon should remain consistent across platforms. Use an SF Symbol, ImageVector, or React Native graphic component when the operating system or product owns the artwork.
Accessibility
Standalone icons are decorative when no label or content description is supplied. Meaningful icons require a concise accessible name.
Shared component