Pilot
RN-universal Icon pilot
ScaffoldedRnIcon wraps a Lucide icon in an RN View so consumers can size, colour and position icons uniformly. Decorative icons are hidden from assistive tech; labelled icons announce as images. On native, the same API swaps the underlying svg renderer to react-native-svg in Phase 7 — no call-site changes.
Default grid (24px, stroke 1.5)
Home
Search
User
Settings
Heart
Star
Bookmark
Share
Download
Play
Calendar
Map pin
Camera
Mail
Microphone
Bell
Size + weight variants
16px / 1.5
24px / 1.5 (default)
32px / 2
48px / 1
accent tint
Decorative vs labelled
| Use case | Call site | Accessibility outcome |
|---|---|---|
| Decorative (next to a text label) | <RnIcon icon={Bell} /> | aria-hidden on web, accessibilityRole="none" on native — skipped by AT |
| Standalone, meaningful | <RnIcon icon={Bell} accessibilityLabel="Notifications" /> | Announced as "Notifications" image on web and native |
| Themed tint | <RnIcon icon={Heart} color="var(--color-accent)" /> | Receives brand accent; re-themes with brand switcher |
Cross-platform note
lucide-react renders DOM <svg> elements — fine on the web via RN Web, but those elements do not mount on native. Phase 7 replaces the underlying renderer with lucide-react-native (which emits react-native-svg) while keeping RnIcon’s public API unchanged. Consumers’ call-sites do not move.