REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

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