1# Icons (SF Symbols)
2 
3Use SF Symbols for native feel. Never use FontAwesome or Ionicons.
4 
5## Basic Usage
6 
7```tsx
8import { SymbolView } from "expo-symbols";
9import { PlatformColor } from "react-native";
10 
11<SymbolView
12  tintColor={PlatformColor("label")}
13  resizeMode="scaleAspectFit"
14  name="square.and.arrow.down"
15  style={{ width: 16, height: 16 }}
16/>;
17```
18 
19## Props
20 
21```tsx
22<SymbolView
23  name="star.fill"                    // SF Symbol name (required)
24  tintColor={PlatformColor("label")}  // Icon color
25  size={24}                           // Shorthand for width/height
26  resizeMode="scaleAspectFit"         // How to scale
27  weight="regular"                    // thin | ultraLight | light | regular | medium | semibold | bold | heavy | black
28  scale="medium"                      // small | medium | large
29  style={{ width: 16, height: 16 }}   // Standard style props
30/>
31```
32 
33## Common Icons
34 
35### Navigation & Actions
36- `house.fill` - home
37- `gear` - settings
38- `magnifyingglass` - search
39- `plus` - add
40- `xmark` - close
41- `chevron.left` - back
42- `chevron.right` - forward
43- `arrow.left` - back arrow
44- `arrow.right` - forward arrow
45 
46### Media
47- `play.fill` - play
48- `pause.fill` - pause
49- `stop.fill` - stop
50- `backward.fill` - rewind
51- `forward.fill` - fast forward
52- `speaker.wave.2.fill` - volume
53- `speaker.slash.fill` - mute
54 
55### Camera
56- `camera` - camera
57- `camera.fill` - camera filled
58- `arrow.triangle.2.circlepath` - flip camera
59- `photo` - gallery/photos
60- `bolt` - flash
61- `bolt.slash` - flash off
62 
63### Communication
64- `message` - message
65- `message.fill` - message filled
66- `envelope` - email
67- `envelope.fill` - email filled
68- `phone` - phone
69- `phone.fill` - phone filled
70- `video` - video call
71- `video.fill` - video call filled
72 
73### Social
74- `heart` - like
75- `heart.fill` - liked
76- `star` - favorite
77- `star.fill` - favorited
78- `hand.thumbsup` - thumbs up
79- `hand.thumbsdown` - thumbs down
80- `person` - profile
81- `person.fill` - profile filled
82- `person.2` - people
83- `person.2.fill` - people filled
84 
85### Content Actions
86- `square.and.arrow.up` - share
87- `square.and.arrow.down` - download
88- `doc.on.doc` - copy
89- `trash` - delete
90- `pencil` - edit
91- `folder` - folder
92- `folder.fill` - folder filled
93- `bookmark` - bookmark
94- `bookmark.fill` - bookmarked
95 
96### Status & Feedback
97- `checkmark` - success/done
98- `checkmark.circle.fill` - completed
99- `xmark.circle.fill` - error/failed
100- `exclamationmark.triangle` - warning
101- `info.circle` - info
102- `questionmark.circle` - help
103- `bell` - notification
104- `bell.fill` - notification filled
105 
106### Misc
107- `ellipsis` - more options
108- `ellipsis.circle` - more in circle
109- `line.3.horizontal` - menu/hamburger
110- `slider.horizontal.3` - filters
111- `arrow.clockwise` - refresh
112- `location` - location
113- `location.fill` - location filled
114- `map` - map
115- `mappin` - pin
116- `clock` - time
117- `calendar` - calendar
118- `link` - link
119- `nosign` - block/prohibited
120 
121## Animated Symbols
122 
123```tsx
124<SymbolView
125  name="checkmark.circle"
126  animationSpec={{
127    effect: {
128      type: "bounce",
129      direction: "up",
130    },
131  }}
132/>
133```
134 
135### Animation Effects
136 
137- `bounce` - Bouncy animation
138- `pulse` - Pulsing effect
139- `variableColor` - Color cycling
140- `scale` - Scale animation
141 
142```tsx
143// Bounce with direction
144animationSpec={{
145  effect: { type: "bounce", direction: "up" }  // up | down
146}}
147 
148// Pulse
149animationSpec={{
150  effect: { type: "pulse" }
151}}
152 
153// Variable color (multicolor symbols)
154animationSpec={{
155  effect: {
156    type: "variableColor",
157    cumulative: true,
158    reversing: true
159  }
160}}
161```
162 
163## Symbol Weights
164 
165```tsx
166// Lighter weights
167<SymbolView name="star" weight="ultraLight" />
168<SymbolView name="star" weight="thin" />
169<SymbolView name="star" weight="light" />
170 
171// Default
172<SymbolView name="star" weight="regular" />
173 
174// Heavier weights
175<SymbolView name="star" weight="medium" />
176<SymbolView name="star" weight="semibold" />
177<SymbolView name="star" weight="bold" />
178<SymbolView name="star" weight="heavy" />
179<SymbolView name="star" weight="black" />
180```
181 
182## Symbol Scales
183 
184```tsx
185<SymbolView name="star" scale="small" />
186<SymbolView name="star" scale="medium" />  // default
187<SymbolView name="star" scale="large" />
188```
189 
190## Multicolor Symbols
191 
192Some symbols support multiple colors:
193 
194```tsx
195<SymbolView
196  name="cloud.sun.rain.fill"
197  type="multicolor"
198/>
199```
200 
201## Finding Symbol Names
202 
2031. Use the SF Symbols app on macOS (free from Apple)
2042. Search at https://developer.apple.com/sf-symbols/
2053. Symbol names use dot notation: `square.and.arrow.up`
206 
207## Best Practices
208 
209- Always use SF Symbols over vector icon libraries
210- Match symbol weight to nearby text weight
211- Use `.fill` variants for selected/active states
212- Use PlatformColor for tint to support dark mode
213- Keep icons at consistent sizes (16, 20, 24, 32)
214