SF Symbols ile dinamik icon stratejisi

iOS app’lerde icon kullanmak için SF Symbols Apple’ın sunduğu ücretsiz library. 5000+ symbol, system-wide consistency, Dynamic Type support, custom modifier’lar. Custom PNG icon’ları çoğu senaryoda gereksiz yapıyor.

12 iOS app’imde SF Symbols’a geçtiğimden beri custom icon asset’lerim %80 azaldı. Bu yazıda pratik kullanım’ını paylaşacağım.

Basic kullanım

Image(systemName: "heart.fill")
    .foregroundStyle(.red)
    .font(.system(size: 24))

Basit. Name, color, size. 3 satır.

SF Symbols app

Apple ücretsiz tool veriyor: SF Symbols.app (macOS). Tüm 5000+ symbol’i browse, search, copy name.

Category’e göre organized: weather, arrows, privacy, etc. Filter özellikleri çok güçlü.

Dev experience: Xcode autocomplete symbol isimlerini suggest ediyor. Typo riski az.

Symbol variants

Her symbol’ın multiple variant’ı var:

heart: outline
heart.fill: filled
heart.circle: outline in circle
heart.circle.fill: filled in circle
heart.slash: disabled
heart.slash.fill: disabled filled

Same heart concept, different context için variant choose et.

Rendering modes

SF Symbols 4+ için 4 rendering mode:

1. Monochrome: Tek renk (default).

Image(systemName: "heart.fill")
    .foregroundStyle(.red)

2. Hierarchical: Automatic opacity variations.

Image(systemName: "person.3.sequence.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

Üç person icon’u farklı opacity’lerde, depth hissi.

3. Palette: Multiple colors, manual.

Image(systemName: "cloud.sun.rain.fill")
    .symbolRenderingMode(.palette)
    .foregroundStyle(.gray, .yellow, .blue)

Her “layer” için farklı renk. Bulut gri, güneş sarı, yağmur mavi.

4. Multicolor: Apple’ın kendi color suggestion’ı.

Image(systemName: "thermometer.sun.fill")
    .symbolRenderingMode(.multicolor)

Apple designer’larının tasarladığı color combo.

Variable colors

iOS 17+ variable symbols:

@State var value: Double = 0.3

Image(systemName: "waveform.path", variableValue: value)
    .font(.system(size: 60))

variableValue 0-1 arası. Symbol’ın progressive filling gösterir. Volume indicator, loading state, battery level için ideal.

Dynamic weight ve scale

Symbol’ı font weight’le match edebiliyorsun:

Image(systemName: "star.fill")
    .font(.system(size: 17, weight: .bold))
    .imageScale(.large)

imageScale: .small, .medium, .large. Font size’a göre otomatik scale.

Dynamic Type support: Symbol Dynamic Type’a uyuyor. Accessibility için kullanıcı text size’ı büyütüyorsa symbol de büyüyor.

Label("Favorite", systemImage: "star.fill")
    .font(.title)  // Text + symbol ikisi de dynamic

SF Symbols 5 animations

iOS 17 + macOS 14 ile symbol animation’ları.

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. Interactive UI için harika.

Trigger animation:

Image(systemName: "heart.fill")
    .symbolEffect(.bounce, value: likeCount)

likeCount değiştiğinde animate. State-driven.

Custom symbols

SF Symbols complete değilse kendi symbol’ünü ekleyebilirsin.

SF Symbols app’te existing symbol’u “Export” et
SVG olarak üzerinde edit et
Import as custom symbol
Asset catalog’a ekle (special symbol asset type)

Image("MyCustomIcon")  // systemName değil, direct name
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.blue)

Custom symbol’lar system symbol’ları ile aynı API desteği alıyor.

Benefits over custom PNG

1. Size. Custom PNG 50-500KB per icon. SF Symbol system-provided, app’ine ekleniyor %0.

2. Consistency. Apple design system ile uyum. User familiar.

3. Dynamic Type. User text size’ı kontrol edebiliyor.

4. Dark mode automatic. Custom icon her iki mod için ayrı asset. Symbol tek.

5. Animation. SF Symbols 5 animation’lar built-in.

6. Updates. Apple yeni symbol’lar ekliyor her iOS release’de. Sen pasif olarak kazançlı çıkıyorsun.

Limitations

SF Symbols her durumu karşılamıyor:

1. Brand-specific icons. Your app’s logo, custom illustrations.

2. Very specific objects. Rare business concepts (örn. traditional Turkish food items).

3. Complex scenes. Multiple element storytelling icon’lar.

4. iOS 13 öncesi. SF Symbols iOS 13’te geldi. Legacy support yoksa.

Bu senaryolarda custom asset kaçınılmaz.

Performance considerations

SF Symbols vector. Scaling cost minimal. Ama heavy animation (yüzlerce symbol simultaneous) GPU’yu stress’leyebilir.

Best practices:

List’lerde per-row symbol animation avoid. Cell reuse’da animation cancel gerekir.
Static symbol’lar OK.
Major UI event’lerde symbol animation (like, notification). Sparingly.
Variable color changes optimize (value change sıklığı).

Naming conventions

Symbol isimleri structured. Aşina olunca hızlı bulunuyor:

object.variant (heart.fill)
object.container (heart.circle)
action.object (plus.circle)
object.direction (arrow.up.right)
object.modifier (house.fill, house.slash)

Naming logic bilince Xcode autocomplete’ten name hatırlamak kolay.

Localization consideration

SF Symbols culture-specific semantics olabilir. Example: star.fill Western’da favorite, doğu Asya’da farklı meaning.

Symbol seçerken target audience’a göre semantic kontrolü yap.

RTL (Arabic, Hebrew) için symbol’lar auto-mirror:

Image(systemName: "chevron.right")
    .flipsForRightToLeftLayoutDirection(true)  // default true

Accessibility labels

Her symbol’a descriptive label:

Image(systemName: "trash")
    .accessibilityLabel("Delete item")

VoiceOver “Trash” demeyip “Delete item” diyor. User intent clear.

Sonuç

SF Symbols modern iOS icon strategy. Custom PNG’leri büyük ölçüde replace ediyor. App size, consistency, accessibility, animation – hepsinde kazanç.

Yeni project’te default: SF Symbols first. Custom’a ihtiyaç varsa spesifik sebebi olmalı. Library büyüyor her iOS release’de.

Brand differentiation için custom illustration’lar olmalı (onboarding, empty states). Ama toolbar, tab bar, list icon’lar için SF Symbols yeter ve daha iyi.