Icon — Playground
source
State
<kui-icon name="settings" label="Success" size="24px" />| Name | Type | Default | Description |
|---|---|---|---|
| kui-icon | Component | - | Renders an icon from a registered name, trusted inline SVG source, or image URL. |
| name | KuiIconName | undefined | undefined | Icon name resolved from icons registered with provideKuiIcons(), falling back to the default Lucide resolver unless disabled. |
| source | KuiIconSource | undefined | undefined | Trusted static inline SVG markup. It takes precedence over name. |
| src | string | undefined | undefined | External image URL used when no source or registered name is provided. |
| label | string | undefined | undefined | Accessible name for meaningful icons. Omit it for decorative icons. |
| size | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string | number | '1em' | Named presets map to Kikita icon-size tokens. Numeric values become pixels, and arbitrary CSS size strings pass through. |
| provideKuiIcons(icons) | EnvironmentProviders | - | Registers a static map of trusted SVG strings, or an async KuiIconResolver function, for name-based icon lookup. Later registrations take precedence for names both define. Route-level only; component providers cannot accept EnvironmentProviders. |
| KUI_ICONS | InjectionToken<readonly KuiIconRegistry[]> | - | The multi-provider token behind provideKuiIcons(). Provide it directly in a component's own providers ({ provide: KUI_ICONS, multi: true, useValue }) to scope an icon-set override to that subtree. |
| provideKikitaUi({ icons }) | 'lucide' | false | 'lucide' | Registers kui-icon's default resolvers: Lucide (lazily fetched SVG markup from the jsDelivr CDN) and the built-in KUI_BRAND_ICONS set (currently just the 'kikita-brand' wordmark, resolved locally). Set to false to opt out of both. |
Inputs and provider API verified against @kikita-labs/ui v1.6.1 public typings.