claude-skills/building-native-ui/references/icons.md

Icons (SF Symbols)

Use SF Symbols for native feel. Never use FontAwesome or Ionicons.

Basic Usage

import { SymbolView } from "expo-symbols";
import { PlatformColor } from "react-native";

<SymbolView
  tintColor={PlatformColor("label")}
  resizeMode="scaleAspectFit"
  name="square.and.arrow.down"
  style={{ width: 16, height: 16 }}
/>;

Props

<SymbolView
  name="star.fill"                    // SF Symbol name (required)
  tintColor={PlatformColor("label")}  // Icon color
  size={24}                           // Shorthand for width/height
  resizeMode="scaleAspectFit"         // How to scale
  weight="regular"                    // thin | ultraLight | light | regular | medium | semibold | bold | heavy | black
  scale="medium"                      // small | medium | large
  style={{ width: 16, height: 16 }}   // Standard style props
/>

Common Icons

Navigation & Actions

• house.fill - home
• gear - settings
• magnifyingglass - search
• plus - add
• xmark - close
• chevron.left - back
• chevron.right - forward
• arrow.left - back arrow
• arrow.right - forward arrow

Media

• play.fill - play
• pause.fill - pause
• stop.fill - stop
• backward.fill - rewind
• forward.fill - fast forward
• speaker.wave.2.fill - volume
• speaker.slash.fill - mute

Camera

• camera - camera
• camera.fill - camera filled
• arrow.triangle.2.circlepath - flip camera
• photo - gallery/photos
• bolt - flash
• bolt.slash - flash off

Communication

• message - message
• message.fill - message filled
• envelope - email
• envelope.fill - email filled
• phone - phone
• phone.fill - phone filled
• video - video call
• video.fill - video call filled

Social

• heart - like
• heart.fill - liked
• star - favorite
• star.fill - favorited
• hand.thumbsup - thumbs up
• hand.thumbsdown - thumbs down
• person - profile
• person.fill - profile filled
• person.2 - people
• person.2.fill - people filled

Content Actions

• square.and.arrow.up - share
• square.and.arrow.down - download
• doc.on.doc - copy
• trash - delete
• pencil - edit
• folder - folder
• folder.fill - folder filled
• bookmark - bookmark
• bookmark.fill - bookmarked

Status & Feedback

• checkmark - success/done
• checkmark.circle.fill - completed
• xmark.circle.fill - error/failed
• exclamationmark.triangle - warning
• info.circle - info
• questionmark.circle - help
• bell - notification
• bell.fill - notification filled

Misc

• ellipsis - more options
• ellipsis.circle - more in circle
• line.3.horizontal - menu/hamburger
• slider.horizontal.3 - filters
• arrow.clockwise - refresh
• location - location
• location.fill - location filled
• map - map
• mappin - pin
• clock - time
• calendar - calendar
• link - link
• nosign - block/prohibited

Animated Symbols

<SymbolView
  name="checkmark.circle"
  animationSpec={{
    effect: {
      type: "bounce",
      direction: "up",
    },
  }}
/>

Animation Effects

• bounce - Bouncy animation
• pulse - Pulsing effect
• variableColor - Color cycling
• scale - Scale animation

// Bounce with direction
animationSpec={{
  effect: { type: "bounce", direction: "up" }  // up | down
}}

// Pulse
animationSpec={{
  effect: { type: "pulse" }
}}

// Variable color (multicolor symbols)
animationSpec={{
  effect: {
    type: "variableColor",
    cumulative: true,
    reversing: true
  }
}}

Symbol Weights

// Lighter weights
<SymbolView name="star" weight="ultraLight" />
<SymbolView name="star" weight="thin" />
<SymbolView name="star" weight="light" />

// Default
<SymbolView name="star" weight="regular" />

// Heavier weights
<SymbolView name="star" weight="medium" />
<SymbolView name="star" weight="semibold" />
<SymbolView name="star" weight="bold" />
<SymbolView name="star" weight="heavy" />
<SymbolView name="star" weight="black" />

Symbol Scales

<SymbolView name="star" scale="small" />
<SymbolView name="star" scale="medium" />  // default
<SymbolView name="star" scale="large" />

Multicolor Symbols

Some symbols support multiple colors:

<SymbolView
  name="cloud.sun.rain.fill"
  type="multicolor"
/>

Finding Symbol Names

1. Use the SF Symbols app on macOS (free from Apple)
2. Search at https://developer.apple.com/sf-symbols/
3. Symbol names use dot notation: square.and.arrow.up

Best Practices

• Always use SF Symbols over vector icon libraries
• Match symbol weight to nearby text weight
• Use .fill variants for selected/active states
• Use PlatformColor for tint to support dark mode
• Keep icons at consistent sizes (16, 20, 24, 32)