expo-symbols

Access SF Symbols on iOS and Material Symbols on Android

expo-symbols

Version: 55.0.4

Provides access to the SF Symbols library on iOS and Material Symbols on Android for React Native and Expo apps.

Installation

npx expo install expo-symbols expo-font

Usage

import { SymbolView } from 'expo-symbols';

function App() {
  return (
    <SymbolView
      name="star.fill"
      size={44}
      tintColor="#FFD700"
      type="hierarchical"
    />
  );
}

API Reference

SymbolView Props

name · string · required

SF Symbol name (iOS) or Material Symbol name (Android)

<SymbolView name="heart.fill" />
<SymbolView name="star" />

size · number · default: "24"

Symbol size in points

tintColor · string

Symbol color

<SymbolView name="heart.fill" tintColor="#FF0000" />

type · 'monochrome' | 'hierarchical' | 'palette' | 'multicolor' · default: "monochrome"

Symbol rendering mode (iOS)

weight · 'ultraLight' | 'thin' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'heavy' | 'black' · default: "regular"

Symbol weight

scale · 'small' | 'medium' | 'large' · default: "medium"

Symbol scale

colors · string[]

Colors for palette mode

<SymbolView 
  name="person.2.fill" 
  type="palette"
  colors={['#FF0000', '#0000FF']}
/>

animationSpec · object

Animation configuration

<SymbolView
  name="heart.fill"
  animationSpec={{
    effect: { type: 'bounce' },
    repeating: true
  }}
/>

fallback · React.ReactNode

Fallback component if symbol not available

Examples

Basic Symbol

import { SymbolView } from 'expo-symbols';

function Icon() {
  return (
    <SymbolView
      name="heart.fill"
      size={32}
      tintColor="#FF0000"
    />
  );
}

Animated Symbol

import { SymbolView } from 'expo-symbols';

function AnimatedIcon() {
  return (
    <SymbolView
      name="star.fill"
      size={44}
      tintColor="#FFD700"
      animationSpec={{
        effect: { type: 'bounce' },
        repeating: true
      }}
    />
  );
}

Palette Colors

import { SymbolView } from 'expo-symbols';

function MultiColorIcon() {
  return (
    <SymbolView
      name="person.2.fill"
      type="palette"
      colors={['#FF0000', '#0000FF', '#00FF00']}
      size={44}
    />
  );
}

With Fallback

import { SymbolView } from 'expo-symbols';
import { Text } from 'react-native';

function IconWithFallback() {
  return (
    <SymbolView
      name="custom.symbol"
      size={32}
      fallback={<Text>⭐</Text>}
    />
  );
}

Platform Support

Platform	Symbol Library
iOS	SF Symbols
Android	Material Symbols
Web	❌

Resources

• Official Documentation
• SF Symbols Browser
• GitHub Repository