Components
Icon
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Icon } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
name | — | "bell" | An SF Symbol name. Mapped to the nearest Material glyph on Android and web; an unmapped name falls back to help rather than throwing. |
size | — | — | Pixel size. Prefer matching the adjacent text size over a round number. |
color | — | — | Explicit colour. Prefer a text-* utility in className so the glyph follows the theme. |
materialIcon | — | — | Pins an exact Material glyph, overriding whatever the SF Symbol mapping would pick. |
materialCommunityIcon | — | — | Same, from the Material Community set. |
Examples
From SF Symbols
SF Symbol names, auto-mapped to Material on this platform.
<View className="flex-row flex-wrap items-center gap-6">
{SF_NAMES.map(name => (
<View key={name} className="items-center gap-1">
<Icon name={name} size={28} />
<Text variant="caption2" color="tertiary" className="font-mono">{name}</Text>
</View>
))}
</View>Material Override
Overriding the mapping. name still carries the SF Symbol for iOS, while
materialCommunityIcon / materialIcon pin the exact Material glyph used
on Android and web instead of whatever rn-icon-mapper would pick.
<View className="flex-row flex-wrap items-center gap-6">
<View className="items-center gap-1">
<Icon name="checkmark.circle" materialIcon={{ name: 'check-circle' }} size={28} />
<Text variant="caption2" color="tertiary" className="font-mono">materialIcon</Text>
</View>
<View className="items-center gap-1">
<Icon
name="calendar"
materialCommunityIcon={{ name: 'calendar-check' }}
size={28}
/>
<Text variant="caption2" color="tertiary" className="font-mono">materialCommunityIcon</Text>
</View>
<View className="items-center gap-1">
<Icon name="banknote" materialCommunityIcon={{ name: 'cash-multiple' }} size={28} />
<Text variant="caption2" color="tertiary" className="font-mono">cash-multiple</Text>
</View>
</View>Sizes
<View className="flex-row items-end gap-6">
{[16, 20, 24, 32, 48].map(size => (
<Icon key={size} name="bell" size={size} />
))}
</View>Colors
Colour comes from color, defaulting to the theme's foreground.
<View className="flex-row items-center gap-6">
<Icon name="bell" size={28} />
<Icon name="bell" size={28} color="#DC2626" />
<Icon name="bell" size={28} color="#10B981" />
<Icon name="bell" size={28} color="#9A9A9A" />
</View>Unknown Name
An unmapped SF Symbol name degrades to help instead of crashing.