Version: 8.x

Icons

Many components in React Navigation accept icons to customize their appearance. Depending on the component and platform, different types of icons are supported.

Here are some common places where icons are used in React Navigation:

tabBarIcon option in Bottom Tab Navigator
tabBarIcon option in Material Top Tabs Navigator
drawerIcon option in Drawer Navigator
icon prop in DrawerItem component
headerBackIcon option in Native Stack Navigator
headerBackIcon option in Stack Navigator
icon prop in HeaderBackButton component
icon prop in DrawerToggleButton component
icon property in Native Stack header items (iOS only, image and sfSymbol only)

Typically, components accept an icon object with a type property:

sfSymbol (iOS only)

headerBackIcon: {
  type: 'sfSymbol',
  name: 'arrow.left',
}

materialSymbol (Android only)

headerBackIcon: {
  type: 'materialSymbol',
  name: 'arrow_back',
}

image (All platforms)

headerBackIcon: {
  type: 'image',
  source: require('./path/to/icon.png'),
}

The sfSymbol and materialSymbol types use the respective system icon libraries on each platform. The image type allows you to use a custom image as an icon on any platform, drawable resources on Android, and asset catalog images on iOS.

SF Symbols

SF Symbols is a library of over 6,900 symbols designed to integrate well with the San Francisco system font on Apple platforms. It comes included with iOS and other Apple platforms.

Where SF Symbols are supported, icon options and props accept an object with type: 'sfSymbol' and a name property to specify the SF Symbol to use:

tabBarIcon: {
  type: 'sfSymbol',
  name: 'star.fill',
}

In addition, React Navigation also exports a SFSymbol component that you can use to render SF Symbols directly in your own components:

import { SFSymbol } from '@react-navigation/native';

function MyComponent() {
  return <SFSymbol name="star.fill" size={24} />;
}

The component accepts the following props:

name

The name of the SF Symbol to display (required).

The SF Symbol icons have multiple variants for the same icon. Different variants can be used by adding a suffix to the name. For example, star, star.fill, and star.circle are all variants of the star symbol.

You can browse the available symbols and their variants in the SF Symbols app.
size

The size of the symbol. Defaults to 24.
color

The color of the symbol. Defaults to black.

In monochrome mode, this is used as the tint color. In hierarchical and palette modes, it is used as the fallback for colors.primary.
weight

The weight of the symbol. Defaults to regular.

Can be one of:
- 'thin' (100)
- 'ultralight' (200)
- 'light' (300)
- 'regular' (400)
- 'medium' (500)
- 'semibold' (600)
- 'bold' (700)
- 'extrabold' (800)
- 'black' (900)
scale

The scale variant of the symbol relative to its font size. Defaults to medium.

Can be one of:
- 'small'
- 'medium'
- 'large'
variableValue

A value between 0 and 1 used to customize variable symbols.

Variable symbols, such as wifi or speaker.wave.3, have layers that progressively activate to represent a magnitude. 0 renders the fewest layers, while 1 renders the full symbol.

This can be used for status indicators such as signal strength, battery level, volume, brightness, or progress. It has no effect on symbols that aren't variable.
variableValueMode

How the partial state from variableValue is rendered. Requires iOS 26+. Ignored on earlier versions. Defaults to automatic.

Can be one of:
- 'automatic': The system chooses based on the symbol.
- 'color': Inactive layers are faded with opacity.
- 'draw': Layers are partially drawn instead of faded.
renderingMode

The rendering mode of the symbol. Can be one of:
- 'monochrome' (default): Single color tint.
- 'hierarchical': Derived hierarchy from a single color.
- 'palette': Explicit colors for each layer.
- 'multicolor': Symbol's built-in multicolor scheme.
colors

Object of colors to use for non-monochrome rendering modes. It can have the following properties:
- primary: Base color for hierarchical mode.
- secondary: Second layer in palette mode.
- tertiary: Third layer in palette mode.
Ignored when renderingMode is 'multicolor'. If the prop is not provided, the primary color defaults to the color prop.

Example:
```
<SFSymbol
  name="star.fill"
  size={30}
  renderingMode="palette"
  colors={{
    primary: 'red',
    secondary: 'yellow',
    tertiary: 'blue',
  }}
/>
```
colorRenderingMode

How color is applied across the symbol's layers. Requires iOS 26+. Ignored on earlier versions. Defaults to automatic.

Can be one of:
- 'automatic': The system chooses based on the symbol.
- 'flat': A solid color per layer.
- 'gradient': A gradient derived from each layer's color.
effect

The symbol effect to apply. Requires iOS 17+. Effects introduced in later iOS versions are ignored on earlier versions.

It can be a string with the following values:
- 'bounce'
- 'pulse'
- 'appear'
- 'disappear'
- 'variableColor'
- 'scale'
- 'breathe'
- 'wiggle'
- 'rotate'
- 'drawOn'
- 'drawOff'
Or a custom effect object with a type property and additional options:
```
<SFSymbol
  name="bell.fill"
  effect={{
    type: 'bounce',
    direction: 'up',
    repeat: { count: 2, delay: 0.2 },
    speed: 1.5,
    scope: 'wholeSymbol',
  }}
/>
```
All effects support the following options:
- type: The effect to apply. One of the values listed above.
- speed: Speed multiplier for the effect. Defaults to 1.
- repeat: Repeat behavior. Supported values are:
  - 'continuous': Repeat indefinitely with no delay.
  - 'nonRepeating': Run the effect once.
  - An object with the following properties:
    - count: Number of times to repeat the effect.
    - delay: Delay in seconds between repeated effect cycles.
Some options are only supported by specific effects:
- bounce, appear, disappear, and scale:
  - direction: Direction for the effect. Can be one of:
    - 'up'
    - 'down'
  - scope: Whether to animate the whole symbol at once or by layer. Can be one of:
    - 'byLayer' (default)
    - 'wholeSymbol'
- pulse:
  - scope: Whether to animate the whole symbol at once or by layer. Can be one of:
    - 'byLayer' (default)
    - 'wholeSymbol'
- breathe:
  - variant: Breathe effect variant. Can be one of:
    - 'plain'
    - 'pulse'
  - scope: Whether to animate the whole symbol at once or by layer. Can be one of:
    - 'byLayer' (default)
    - 'wholeSymbol'
- wiggle:
  - direction: Direction for the effect. Can be one of:
    - 'up'
    - 'down'
    - 'left'
    - 'right'
    - 'forward'
    - 'backward'
    - 'clockwise'
    - 'counterClockwise'
  - angle: Custom wiggle angle in degrees. Overrides direction when set.
  - scope: Whether to animate the whole symbol at once or by layer. Can be one of:
    - 'byLayer' (default)
    - 'wholeSymbol'
- rotate:
  - direction: Direction for the effect. Can be one of:
    - 'clockwise'
    - 'counterClockwise'
  - scope: Whether to animate the whole symbol at once or by layer. Can be one of:
    - 'byLayer' (default)
    - 'wholeSymbol'
- drawOn:
  - scope: Whether to animate the whole symbol at once, by layer, or individually. Can be one of:
    - 'byLayer' (default)
    - 'wholeSymbol'
    - 'individually'
- drawOff:
  - scope: Whether to animate the whole symbol at once, by layer, or individually. Can be one of:
    - 'byLayer' (default)
    - 'wholeSymbol'
    - 'individually'
  - drawDirection: Whether the animation follows the symbol's authored draw order or plays it in reverse. Can be one of:
    - 'nonReversed': Follows the symbol's draw order.
    - 'reversed': Plays the draw order in reverse.
- variableColor:
  - reversing: Whether the effect reverses with each cycle. Defaults to false.
  - cumulative: Whether layers light up cumulatively and stay active through the cycle. Defaults to false.
  - inactiveLayers: How inactive layers are displayed. Can be one of:
    - 'hide': Inactive layers are invisible.
    - 'dim': Inactive layers stay visible but faded.
contentTransition

The transition to apply when the symbol name or

SF Symbols​

SF Symbols