Eigene SF Symbols: Das variable Template und die drei erforderlichen Quellen

Apple liefert mehr als 6.000 SF Symbols aus, und die SF Symbols-App ist kostenlos. Dennoch benötigen die meisten Apps irgendwann ein Symbol, das Apple nicht hat: ein Markenzeichen, ein domänenspezifisches Glyph, eine eigene Aktion, die nicht ins System-Vokabular passt. Der richtige Weg ist, ein eigenes SF Symbol zu erstellen, anstatt ein statisches SVG einzubinden, denn eigene SF Symbols erben die Maschinerie des Systems kostenlos: Sie skalieren mit Dynamic Type, nehmen an Symbol-Effects-Animationen teil, rendern in den vier Rendering-Modi, richten sich an der SF Pro-Typografie aus und respektieren Barrierefreiheitseinstellungen ohne app-spezifischen Code. Statische SVGs nehmen an all dem nicht teil.

Der Beitrag zeichnet den Workflow anhand des variablen Templates der SF Symbols-App nach, das mit SF Symbols 3 auf der WWDC 2021 eingeführt wurde¹. Der Rahmen lautet „Was sind die drei erforderlichen Quelldesigns und warum”, denn das Templateformat ist der tragende Bestandteil des Workflows, den die meisten Designer und Entwickler beim ersten Mal übersehen. Spätere SF Symbols-Versionen (4, 5, 6, 7) haben das Templateformat um variable Farben, Magic-Replace-Übergänge, Verlaufsunterstützung und Animationseffekte erweitert, aber die Drei-Quellen-Grundstruktur des variablen Templates ist seit SF Symbols 3 stabil.

TL;DR

• Eigene SF Symbols beginnen mit einem aus der SF Symbols-App exportierten Template (File > Export Template oder ⌘E)². Das Template ist ein SVG mit systemdefinierten Hilfslinien für die Größenbestimmung und einem Platzhalter-Symboldesign zum Ersetzen.
• Das variable Template benötigt nur drei Quelldesigns: Ultralight-Small, Regular-Small und Black-Small. Die SF Symbols-App interpoliert die verbleibenden 24 Variationen (3 Skalen × 9 Strichstärken) automatisch³.
• Pfadkompatibilität ist die tragende Anforderung: Jeder Pfad muss in allen drei Quellen die gleiche Anzahl an Ankerpunkten, denselben Startpunkt und dieselbe Richtung aufweisen. Ohne dies erzeugt die Interpolation fehlerhafte Glyphen.
• Eigene Symbole unterstützen alle vier Rendering-Modi (Monochrom, hierarchisch, Palette, Multicolor) und die Ebenenstruktur (primär, sekundär, tertiär). Im Rendering-Inspektor des Symbol-Editors werden Teilpfade den Ebenen zugewiesen.
• Endgültige Auslieferung: Fügen Sie die Symboldatei in Xcode als Symbol Image Set in den Asset-Katalog ein. SwiftUI verweist über Image(_:) mit dem Namen des Symbols darauf; den Rest übernimmt das System.

Das variable Template

SF Symbols 3 (WWDC 2021) führte das variable Template ein³, eine einzelne SVG-Datei, die drei Quelldesigns erfasst und aus der die SF Symbols-App das gesamte Raster aus 27 Variationen generiert. Die drei Quellen sind:

• Ultralight-Small. Die leichteste Strichstärke, die kleinste Skala.
• Regular-Small. Die mittlere Strichstärke, die kleinste Skala.
• Black-Small. Die stärkste Strichstärke, die kleinste Skala.

Aus diesen drei Quellen interpoliert die App die übrigen 24 Zellen (Ultralight-Medium, Regular-Medium, Black-Medium, Ultralight-Large, Regular-Large, Black-Large sowie die Zwischenstärken in jeder Skala). Die Interpolation erfolgt automatisch, sofern die Quellpfade eine kompatible Struktur aufweisen.

Bevor SF Symbols 3 das variable Template einführte, mussten für eigene Symbole alle 27 Variationen manuell gezeichnet werden. Das variable Template reduzierte das auf 3 + Interpolation, was den Unterschied zwischen einem überschaubaren Designaufwand und einem projektkillenden Aufwand ausmacht.

Die Anforderung an kompatible Daten

Die Pfadinterpolation setzt voraus, dass die drei Quellpfade dieselbe Form in derselben Reihenfolge beschreiben²:

• Gleiche Anzahl an Ankerpunkten. Ein Quadrat mit 4 Ankern in Regular-Strichstärke muss auch in Ultralight und Black 4 Anker haben, selbst wenn die sichtbare Krümmung anders ausfällt.
• Gleicher Startpunkt. Der erste Anker des Pfades muss in allen drei Strichstärken an derselben konzeptionellen Position liegen (z. B. immer in der oberen linken Ecke).
• Gleiche Richtung. Alle drei Pfade durchlaufen die Form in derselben Reihenfolge (im oder gegen den Uhrzeigersinn).

Wird eine dieser Anforderungen verletzt, entstehen Interpolationsartefakte: Knicke, falsche Überlappungen, fehlende Striche. Die SF Symbols-App weist auf einige davon hin (die Variantenvorschau zeigt das Interpolationsergebnis), aber subtile Probleme zeigen sich erst im finalen exportierten Asset.

Der pragmatische Workflow besteht darin, zuerst Regular-Small zu entwerfen, dann Ultralight durch Reduzierung der Strichstärke und Black durch Erhöhung der Strichstärke aus demselben Pfadgerüst abzuleiten. Jede Ableitung erhält Ankeranzahl, Startpunkt und Richtung konstruktionsbedingt. Wer jede Strichstärke unabhängig entwirft, erzeugt Kompatibilitätsprobleme, deren Behebung länger dauert als ein Neuaufbau.

Der Workflow

Fünf Schritte vom Konzept zum funktionierenden Asset:

1. Ein ähnliches existierendes Symbol finden

Die Bibliothek der SF Symbols-App umfasst über 6.000 Symbole. Suchen Sie eines, das Ihrem Konzept strukturell ähnelt (ein Kreis-mit-Inhalt, ein Quadrat-mit-Overlay, eine Linie-mit-Dekoration). Der Export-Template-Pfad nutzt die Geometrie eines vorhandenen Symbols als Ausgangspunkt.

2. Das Template exportieren

File > Export Template… oder ⌘E. Wählen Sie „Variable” als Templatetyp. Das Ergebnis ist eine SVG-Datei mit den drei Quellstärken des Symbols sowie Referenzgeometrie, die die Versalhöhe, Grundlinie und visuellen Ränder zeigt, die SF Symbols zur Ausrichtung an SF Pro-Text verwendet.

3. Die Template-Pfade ersetzen

Öffnen Sie das SVG in einem Vektoreditor (Sketch, Figma, Illustrator, Affinity Designer, Inkscape). Die benannten Ebenen des Templates enthalten die drei Quelldesigns. Ersetzen Sie jedes durch Ihr eigenes Design, wobei Sie die Ebenennamen und die Ausrichtung an Versalhöhe/Grundlinie beibehalten.

Die Pfadkompatibilitätsanforderung ist hier entscheidend: Entwerfen Sie jede Strichstärke aus demselben Pfadgerüst, indem Sie Strichstärke oder Füllgewicht variieren, statt neu zu zeichnen. Der „Duplizieren-und-modifizieren”-Workflow von Vektorwerkzeugen ist der Weg des geringsten Widerstands.

4. Erneut importieren und prüfen

Ziehen Sie das modifizierte SVG zurück in die SF Symbols-App. Die App generiert die 27 Variationen und zeigt sie im Variantenraster. Prüfen Sie jede Strichstärken-Skala-Kombination bei verschiedenen Zoomstufen; Interpolationsartefakte erscheinen oft bei mittleren Strichstärken, die nicht sofort offensichtlich sind.

Bei Symbolen mit mehreren visuellen Elementen (ein Körper plus ein Badge, ein Kreis plus eine Innenform) öffnen Sie den Rendering-Inspektor und weisen Teilpfade den Ebenen (primär, sekundär, tertiär) zu. Die Ebenenzuweisungen bestimmen, wie das Symbol in den hierarchischen, Palette- und Multicolor-Modi gerendert wird.

5. In Xcode hinzufügen

Ziehen Sie die Symboldatei (.svg, exportiert aus SF Symbols) in den Asset-Katalog von Xcode. Xcode behandelt sie als Symbol Image Set. Referenzieren Sie sie aus dem Code:

Image("MyCustomSymbol")
    .symbolRenderingMode(.hierarchical)
    .foregroundStyle(.tint)

Image(_:) (ohne systemName:-Parameter) lädt aus dem Asset-Katalog. Dieselben .symbolRenderingMode-, .foregroundStyle-, .symbolEffect- und Dynamic-Type-Verhalten, die bei System-Symbolen funktionieren, funktionieren auch bei eigenen Symbolen, sofern das Symbol korrekt erstellt wurde.

Rendering-Modi und Ebenenstruktur

Die vier Rendering-Modi, die SF Symbols bereitstellt, funktionieren bei eigenen Symbolen genauso wie bei den System-Symbolen⁴:

• Monochrom. Eine Farbe (foregroundStyle). Der einfachste und am häufigsten genutzte Modus.
• Hierarchisch. Eine Farbe mit unterschiedlicher Deckkraft pro Ebene. Die im Rendering-Inspektor definierten Ebenen erhalten voreingestellte Deckkraftwerte; der Entwickler weist eine Tönung zu und erhält automatisch visuelle Hierarchie.
• Palette. Explizite Farbe pro Ebene. Der Entwickler übergibt mehrere foregroundStyle-Argumente; jede Ebene erhält ihre eigene.
• Multicolor. Von Apple definierte feste Farben pro Ebene. Bei eigenen Symbolen sind dies die Farben, die der Designer in der Multicolor-Konfiguration des Symbol-Editors zuweist.

Die Ebenenstruktur ist es, die hierarchisch, Palette und Multicolor funktionieren lässt. Ein eigenes Symbol ohne Ebenenzuweisungen bündelt alle Pfade in der primären Ebene; das Symbol rendert weiterhin im Monochrom-Modus, erzeugt in den anderen Modi aber keine visuelle Hierarchie. Nehmen Sie sich die Zeit, im Rendering-Inspektor Ebenen zuzuweisen, wenn das Symbol von Tiefe profitiert.

Häufige Fehler

Drei Muster aus Fehlerprotokollen zu eigenen Symbolen:

Verletzungen der Pfadkompatibilität. Das häufigste Problem. Ein Symbol, das „in Regular-Strichstärke gut aussieht”, aber fehlerhafte Zwischenstärken erzeugt, hat fast immer ein Pfadkompatibilitätsproblem. Diagnose: Öffnen Sie das Variantenraster der SF Symbols-App, betrachten Sie die mittleren Strichstärken; zeigen sich Knicke oder Striche, die nicht zur erwarteten Interpolation passen, verletzt einer der drei Quellpfade die Kompatibilität.

Fehlausrichtung von Grundlinie oder Versalhöhe. Symbole, die ohne Berücksichtigung der Grundlinien-Hilfslinie des Templates entworfen werden, sitzen neben Text unpassend. Das visuelle Symptom: Das Symbol erscheint zu hoch oder zu tief, wenn es inline mit Text im .body-Stil platziert wird. Lösung: Verwenden Sie die Referenzgeometrie des Templates; positionieren Sie den optischen Mittelpunkt des Symbols auf der Mitte der Versalhöhe.

Keine Ebenenzuweisungen. Ein Symbol mit reichhaltiger interner Struktur (mehrere visuelle Elemente), aber ohne Ebenenzuweisungen rendert nur im Monochrom-Modus korrekt. Apps, die den hierarchischen oder Palette-Modus wählen, erhalten flache Ausgaben. Lösung: Öffnen Sie den Rendering-Inspektor und weisen Sie jeden Teilpfad einer Ebene zu (primär für die Hauptform, sekundär für Akzente, tertiär für tertiäre Details).

Was dieses Muster für iOS 26+-Apps bedeutet

Drei Erkenntnisse.

1. Verwenden Sie eigene SF Symbols, keine reinen SVGs, für In-App-Icons. Der Workflow für eigene Symbole ist echte technische Arbeit, aber die Systemintegration (Dynamic Type, Symbol Effects, Rendering-Modi, Barrierefreiheit) macht den Aufwand für jedes Icon lohnenswert, das langfristig in der UI lebt. Statische SVGs sind richtig für einmalige Marketing-Assets, nicht für die Kern-UI.

2. Entwerfen Sie aus einem einzigen Gerüst; variieren Sie die Strichstärke, nicht die Pfadstruktur. Pfadkompatibilitätsverletzungen sind der tragende Fehlermodus. Der defensive Designprozess beginnt mit einer Strichstärke (Regular-Small) und leitet Ultralight durch Reduzierung der Striche und Black durch Erhöhung der Striche aus derselben Pfadgeometrie ab. Kompatibilität bleibt konstruktionsbedingt erhalten.

3. Weisen Sie Ebenen explizit zu für jedes Symbol, das von Rendering-Modi profitiert. Ein Symbol, das nur monochrom rendert, ist ein Symbol, das auf die Hälfte des SF Symbols-Systems verzichtet. Der Rendering-Inspektor benötigt nur wenige Klicks; das Ergebnis sind Symbole, die neben System-Symbolen an den hierarchischen, Palette- und Multicolor-Modi teilnehmen.

Der vollständige Apple-Ecosystem-Cluster: typisierte App Intents; MCP-Server; die Routing-Frage; Foundation Models; die Unterscheidung Laufzeit vs. Tooling LLM; drei Oberflächen; das Single-Source-of-Truth-Muster; Zwei MCP-Server; Hooks für Apple-Entwicklung; Live Activities; die watchOS-Laufzeit; SwiftUI-Internals; RealityKits räumliches mentales Modell; SwiftData-Schema-Disziplin; Liquid-Glass-Muster; Multi-Plattform-Auslieferung; die Plattform-Matrix; Vision-Framework; Symbol Effects; Core ML-Inferenz; Writing Tools API; Swift Testing; Privacy Manifest; Barrierefreiheit als Plattform; SF Pro-Typografie; visionOS-Raummuster; Speech-Framework; SwiftData-Migrationen; tvOS-Focus-Engine; @Observable-Internals; SwiftUI-Layout-Protokoll; worüber ich nicht schreiben werde. Der Hub befindet sich in der Apple Ecosystem Series. Für umfassenderen Kontext zu iOS mit AI-Agenten siehe den iOS Agent Development guide.

FAQ

Brauche ich die SF Symbols-App, oder kann ich eigene Symbole anders erstellen?

Die SF Symbols-App ist das offizielle Werkzeug und das einzige, das validierte, App-Store-kompatible eigene Symbole produziert. Drittanbieter-Tools und Online-Konverter existieren, produzieren aber SVGs, die die Anforderungen des Templateformats erfüllen können oder auch nicht. Verwenden Sie für Produktions-Apps die SF Symbols-App.

Kann ich eigene Symbole unter Windows erstellen?

Die SF Symbols-App läuft nur unter macOS. Sie können das exportierte SVG-Template auf jeder Plattform mit einem Vektoreditor bearbeiten, aber die Export- und Re-Import-Schritte erfordern macOS. Die meisten Teams haben mindestens einen Designer mit macOS, der diese Schritte übernehmen kann; in Remote-Team-Workflows wird die SVG-Datei über Versionskontrolle oder gemeinsamen Speicher weitergegeben.

Wie unterstütze ich .symbolEffect bei einem eigenen Symbol?

Die meisten Symboleffekte funktionieren automatisch, wenn die Symbolstruktur gut geformt ist: bounce, pulse, scale und die übrigen wirken auf das Symbol unabhängig von seiner Quelle. Der .replace-Inhaltsübergang erfordert, dass das Ausgangs- und Zielsymbol kompatible Strukturen haben (ähnliche Ebenenzahlen, ähnliche Gesamtform). Der Symbol-Effects-Beitrag des Clusters behandelt das Effektvokabular im Detail.

Was ist der Unterschied zwischen einem Symbol Image Set und einem regulären Image Set in Xcode?

Ein Symbol Image Set importiert das vollständige Template des Symbols (alle 27 Variationen) und stellt sie über die Rendering-Pipeline von SF Symbols bereit. Das Symbol skaliert mit Dynamic Type, nimmt an Rendering-Modi teil und arbeitet mit .symbolEffect. Ein reguläres Image Set ist eine statische Raster- oder SVG-Ressource, die an all dem nicht teilnimmt. Verwenden Sie Symbol Image Set für eigene SF Symbols.

Wie verhalten sich eigene Symbole unter visionOS und watchOS?

Genauso wie System-Symbole: Sie rendern in den von der Plattform erwarteten Größen (klein für watchOS, groß für visionOS), nehmen an den Barrierefreiheitsfunktionen der Plattform teil und respektieren die Farb- und Effektkonventionen der Plattform. Die Erstellung eigener Symbole ist einmalig; das plattformübergreifende Verhalten ist automatisch. Die Beiträge Apple Platform Matrix und visionOS-Raummuster des Clusters behandeln die plattformspezifischen Überlegungen.

Welche Auswirkungen hat das auf den App-Store-Review?

Keine. Eigene SF Symbols werden identisch wie andere Asset-Catalog-Assets geprüft. Die visuellen Stilrichtlinien (keine Nachahmung von Apples UI-Mustern, keine Verletzung von Markenrechten) gelten für eigene Symbole genauso wie für andere eigene Grafiken; ansonsten behandelt der Review-Prozess sie als Standard-Bild-Assets.

Quellen