SF Symbols is Apple’s free icon library for iOS apps. 5000+ symbols, system-wide consistency, Dynamic Type support, custom modifiers. It makes custom PNG icons unnecessary in most scenarios.
Since switching to SF Symbols across my 12 iOS apps, my custom icon assets have shrunk by 80%. Here’s how I actually use them.
Basic usage
Image(systemName: "heart.fill")
.foregroundStyle(.red)
.font(.system(size: 24))Simple. Name, color, size. Three lines.
The SF Symbols app
Apple ships a free tool: SF Symbols.app (macOS). Browse all 5000+ symbols, search them, copy the name.
Organized by category: weather, arrows, privacy, etc. The filters are powerful.
Dev experience: Xcode autocomplete suggests symbol names. Typo risk is low.
Symbol variants
Every symbol has multiple variants:
heart: outlineheart.fill: filledheart.circle: outline in a circleheart.circle.fill: filled in a circleheart.slash: disabledheart.slash.fill: disabled filled
Same heart concept, pick the variant that fits the context.
Rendering modes
SF Symbols 4+ supports four rendering modes:
1. Monochrome: single color (default).
Image(systemName: "heart.fill")
.foregroundStyle(.red)2. Hierarchical: automatic opacity variations.
Image(systemName: "person.3.sequence.fill")
.symbolRenderingMode(.hierarchical)
.foregroundStyle(.blue)Three person icons at different opacities, giving a sense of depth.
3. Palette: multiple colors, manual.
Image(systemName: "cloud.sun.rain.fill")
.symbolRenderingMode(.palette)
.foregroundStyle(.gray, .yellow, .blue)A different color per “layer”. Cloud gray, sun yellow, rain blue.
4. Multicolor: Apple’s own color suggestion.
Image(systemName: "thermometer.sun.fill")
.symbolRenderingMode(.multicolor)The color combo Apple’s designers picked.
Variable colors
iOS 17+ variable symbols:
@State var value: Double = 0.3
Image(systemName: "waveform.path", variableValue: value)
.font(.system(size: 60))variableValue ranges 0 to 1. Shows the symbol progressively filling. Perfect for volume indicators, loading states, battery levels.
Dynamic weight and scale
You can match symbol weight to the surrounding font:
Image(systemName: "star.fill")
.font(.system(size: 17, weight: .bold))
.imageScale(.large)imageScale: .small, .medium, .large. Scales automatically with font size.
Dynamic Type support: symbols respect Dynamic Type. If the user bumps text size for accessibility, the symbol grows with it.
Label("Favorite", systemImage: "star.fill")
.font(.title) // Both text and symbol scale dynamicallySF Symbols 5 animations
iOS 17 and macOS 14 brought symbol animations.
Image(systemName: "heart.fill")
.symbolEffect(.bounce)
Image(systemName: "bell.badge")
.symbolEffect(.pulse)
Image(systemName: "cloud.bolt.fill")
.symbolEffect(.variableColor.iterative)Bounce, pulse, scale, appear, disappear. Great for interactive UI.
Trigger animation:
Image(systemName: "heart.fill")
.symbolEffect(.bounce, value: likeCount)Animates whenever likeCount changes. State-driven.
Custom symbols
When SF Symbols isn’t complete, you can add your own.
- Export an existing symbol from the SF Symbols app
- Edit it as SVG
- Import as a custom symbol
- Add it to the asset catalog (the special symbol asset type)
Image("MyCustomIcon") // not systemName, direct name
.symbolRenderingMode(.hierarchical)
.foregroundStyle(.blue)Custom symbols get the same API support as system ones.
Benefits over custom PNG
1. Size. A custom PNG is 50 to 500KB per icon. SF Symbols are system-provided, adding zero to your app.
2. Consistency. Aligned with Apple’s design system. Users recognize them.
3. Dynamic Type. The user controls text size.
4. Dark mode automatic. Custom icons need separate assets for each mode. Symbols are one.
5. Animation. SF Symbols 5 animations are built in.
6. Updates. Apple adds new symbols with every iOS release. You get the benefit passively.
Limitations
SF Symbols doesn’t cover every case:
1. Brand-specific icons. Your app’s logo, custom illustrations.
2. Very specific objects. Rare business concepts (for example, traditional food items).
3. Complex scenes. Multi-element storytelling icons.
4. Before iOS 13. SF Symbols arrived in iOS 13. If you need legacy support, no.
In these scenarios, custom assets are unavoidable.
Performance considerations
SF Symbols are vector. Scaling cost is minimal. But heavy animation (hundreds of symbols simultaneously) can stress the GPU.
Best practices:
- Avoid per-row symbol animation in lists. On cell reuse, you have to cancel the animation.
- Static symbols are fine.
- Animate symbols on major UI events (like, notification). Sparingly.
- Optimize variable color changes (frequency of value change).
Naming conventions
Symbol names are structured. Once you know them, you find things fast:
object.variant(heart.fill)object.container(heart.circle)action.object(plus.circle)object.direction(arrow.up.right)object.modifier(house.fill, house.slash)
Once you know the naming logic, Xcode autocomplete does the rest.
Localization considerations
SF Symbols can carry culture-specific semantics. Example: star.fill reads as favorite in the West but carries different meaning in East Asia.
When picking a symbol, check the semantics against your target audience.
For RTL (Arabic, Hebrew), symbols auto-mirror:
Image(systemName: "chevron.right")
.flipsForRightToLeftLayoutDirection(true) // default trueAccessibility labels
Give every symbol a descriptive label:
Image(systemName: "trash")
.accessibilityLabel("Delete item")VoiceOver says “Delete item” instead of “Trash”. Intent is clear to the user.
Wrap-up
SF Symbols is the modern iOS icon strategy. It replaces most custom PNGs. App size, consistency, accessibility, animation: you win on all of them.
Default on a new project: SF Symbols first. If you need custom, you should have a specific reason. The library grows with every iOS release.
For brand differentiation, keep custom illustrations (onboarding, empty states). But for toolbars, tab bars, and list icons, SF Symbols is enough and better.