REACT-NATIVES
WIRED FOR SPEED
react-natives v2.2.0
Theme
Light
Dark
Get Started
Menu
Components
Core Primitives
Icon
A wrapper component for rendering icon elements from any icon library via the `as` prop.
Example
Preview
Code
Props
Icon Props
Prop
Type
Default
Description
as *
React.ElementType
—
The icon component to render (e.g. a Lucide or MaterialIcon component).
className
string
—
NativeWind utility classes to apply to the icon wrapper.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number
'md'
Controls the icon size. Accepts a preset or a numeric pixel value (e.g. size={24}).
color
string
—
Overrides the icon fill/stroke color.
Usage Guidelines
When to use
Use Icon to render SVG or font icons with consistent sizing and color theming.
Best practices
•
Always pass an icon component via the as prop rather than rendering raw SVGs.
•
Use semantic color tokens from your theme for consistent icon coloring.
•
Match icon size to the surrounding text or component size.
Accessibility
Icons are decorative by default. Add accessibilityLabel when an icon conveys meaning without accompanying text.
Related Components
Button
A compound interactive button component with text, icon, and spinner sub-components, supporting multiple actions, variants, and sizes.
Badge
A compound component for displaying short status labels, counts, or tags with semantic color and variant options.
Fab
A floating action button component that stays fixed at a screen corner with icon and optional label sub-components.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.