Icon

At a glance

• Icon-library-agnostic — pass any component matching { size?: number; color?: string } (lucide, RN-vector-icons, Heroicons, your own SVGs).
• Pair with SemanticIconsProvider to alias semantic keys (checkmark, close, spinner, …) to concrete icons. Components like Alert and Checkbox resolve their default icons through this provider, so swapping the icon set in one place updates the whole library.

Preview

The example below uses the library's built-in defaultSemanticIcons. Drop in your own component (e.g. lucide-react's Star) by passing it to as.

Native preview

as

The icon component to render. Anything with the shape (props: { size?: number; color?: string }) => ReactNode works.

import { Star } from 'lucide-react-native';
import { Icon } from '@nori-ui/core';
 
<Icon as={Star} />

If you're using the semantic icon registry, you usually won't pass as directly — the components that need icons resolve them via SemanticIconsProvider.

size

Pixel size. Defaults to 16. Pass a number; the icon component itself chooses how to scale (most lucide / Heroicons render width={size} height={size}).

<Icon as={Star} size={24} />

color

CSS color string forwarded to the underlying icon component. Defaults to the active theme's text.default. Override per-instance for accents.

<Icon as={Star} color="#facc15" />     // amber star

Props