Eigene SF Symbols: Die variable Vorlage und die drei erforderlichen Quellen

Apple liefert mehr als 6.900 SF Symbols aus, und die SF Symbols-App ist kostenlos. Trotzdem brauchen die meisten Apps irgendwann ein Symbol, das Apple nicht anbietet: ein Markenzeichen, eine fachgebietsspezifische Glyphe oder eine eigene Aktion, die nicht in das Systemvokabular passt. Der richtige Weg ist dann ein eigenes SF Symbol statt eines statischen SVGs. Eigene SF Symbols übernehmen die Systemmechanik automatisch: Sie skalieren mit Dynamic Type, unterstützen Symbol Effects-Animationen, werden in den vier Darstellungsmodi gerendert, richten sich an der SF Pro-Typografie aus und respektieren Bedienungshilfen, ohne dass jede App dafür eigenen Code braucht. Statische SVGs leisten nichts davon.

Dieser Beitrag führt den Arbeitsablauf anhand der variablen Vorlage der SF Symbols-App vor, die mit SF Symbols 3 auf der WWDC 2021 eingeführt wurde¹. Im Mittelpunkt steht die Frage, welche drei Quelldesigns erforderlich sind und warum. Genau dieses Vorlagenformat ist der tragende Teil des Arbeitsablaufs, den viele Designer und Entwickler beim ersten Durchlauf übersehen. Spätere SF Symbols-Versionen (4, 5, 6, 7) haben das Vorlagenformat um variable Farben, Magic-Replace-Übergänge, Gradientenunterstützung und Animationseffekte erweitert. Die Kernstruktur der variablen Vorlage mit drei Quellen ist seit SF Symbols 3 aber stabil geblieben.

Kurzfassung

• Eigene SF Symbols beginnen mit einer Vorlage, die aus der SF Symbols-App exportiert wird (File > Export Template, oder ⌘E)². Die Vorlage ist ein SVG mit systemdefinierten Hilfslinien für die Größenanpassung und einem Platzhalter-Symboldesign, das ersetzt wird.
• Die variable Vorlage benötigt nur drei Quelldesigns: Ultralight-Small, Regular-Small und Black-Small. Die SF Symbols-App interpoliert die übrigen 24 Varianten (3 Skalierungen × 9 Strichstärken) automatisch³.
• Kompatible Pfade sind die entscheidende Anforderung: Jeder Pfad muss in allen drei Quellen dieselbe Anzahl an Ankerpunkten, denselben Startpunkt und dieselbe Richtung haben. Andernfalls erzeugt die Interpolation fehlerhafte Glyphen.
• Eigene Symbole unterstützen alle vier Darstellungsmodi (monochrom, hierarchisch, Palette, mehrfarbig) sowie die Ebenenstruktur (primary, secondary, tertiary). Im Darstellungsinspektor des Symbol Editors werden Teilpfade den Ebenen zugewiesen.
• Die finale Übergabe: Fügen Sie die Symboldatei in Xcode als Symbol Image Set zum Asset Catalog hinzu. SwiftUI referenziert sie über Image(_:) mit dem Namen des Symbols; den Rest übernimmt das System.

Die variable Vorlage

SF Symbols 3 (WWDC 2021) führte die variable Vorlage ein³: eine einzelne SVG-Datei, die drei Quelldesigns enthält und aus der die SF Symbols-App das vollständige Raster aus 27 Varianten erzeugt. Diese drei Quellen sind:

• Ultralight-Small. Die leichteste Strichstärke, kleinste Skalierung.
• Regular-Small. Die mittlere Strichstärke, kleinste Skalierung.
• Black-Small. Die schwerste Strichstärke, kleinste Skalierung.

Aus diesen drei Quellen interpoliert die App die übrigen 24 Zellen automatisch (Ultralight-Medium, Regular-Medium, Black-Medium, Ultralight-Large, Regular-Large, Black-Large sowie die dazwischenliegenden Strichstärken je Skalierung). Voraussetzung ist, dass die Quellpfade strukturell kompatibel sind.

Bevor SF Symbols 3 die variable Vorlage einführte, mussten für eigene Symbole alle 27 Varianten manuell gezeichnet werden. Die variable Vorlage reduzierte diesen Aufwand auf 3 + Interpolation. Genau das macht aus einem kaum tragbaren Projekt eine machbare Designaufgabe.

Die Anforderung an kompatible Daten

Damit Pfade interpoliert werden können, müssen die drei Quellpfade dieselbe Form in derselben Reihenfolge beschreiben²:

• Dieselbe Anzahl an Ankerpunkten. Ein Quadrat mit 4 Ankern in Regular muss auch in Ultralight und Black 4 Anker haben, selbst wenn sich die sichtbare Krümmung unterscheidet.
• Derselbe Startpunkt. Der erste Anker eines Pfads muss in allen drei Strichstärken an derselben konzeptuellen Position liegen, zum Beispiel immer an der linken oberen Ecke.
• Dieselbe Richtung. Alle drei Pfade durchlaufen die Form in derselben Reihenfolge, also im oder gegen den Uhrzeigersinn.

Wenn eine dieser Bedingungen verletzt wird, entstehen Interpolationsfehler: Knicke, falsche Überlagerungen, fehlende Striche. Ein Teil davon wird in der SF Symbols-App sichtbar, weil die Variantenvorschau das Interpolationsergebnis zeigt. Feinere Probleme zeigen sich aber oft erst im final exportierten Asset.

Der pragmatische Arbeitsablauf: Entwerfen Sie zuerst Regular-Small, leiten Sie dann Ultralight durch reduzierte Strichstärke und Black durch erhöhte Strichstärke aus demselben Pfadgerüst ab. Dadurch bleiben Ankeranzahl, Startpunkt und Richtung konstruktionsbedingt erhalten. Werden die einzelnen Strichstärken unabhängig voneinander gezeichnet, entstehen Kompatibilitätsprobleme, deren Fehlersuche länger dauert als der Neuaufbau.

Der Arbeitsablauf

Vom Konzept zum funktionierenden Asset sind es fünf Schritte:

1. Ein ähnliches vorhandenes Symbol finden

Die Bibliothek der SF Symbols-App enthält mehr als 6.900 Symbole. Suchen Sie eines, das Ihrem Konzept strukturell ähnelt: einen Kreis mit Inhalt, ein Quadrat mit Überlagerung, eine Linie mit Dekoration. Der Vorlagenexport nutzt die Geometrie eines vorhandenen Symbols als Ausgangspunkt.

2. Die Vorlage exportieren

File > Export Template… oder ⌘E. Wählen Sie „Variable” als Vorlagentyp. Das Ergebnis ist eine SVG-Datei mit den drei Quell-Strichstärken des Symbols sowie Referenzgeometrie für Versalhöhe, Grundlinie und optische Ränder, die SF Symbols für die Ausrichtung an SF Pro-Text verwendet.

3. Die Vorlagenpfade ersetzen

Öffnen Sie das SVG in einem Vektorprogramm (Sketch, Figma, Illustrator, Affinity Designer, Inkscape). Die benannten Ebenen der Vorlage enthalten die drei Quelldesigns. Ersetzen Sie jedes davon durch Ihr eigenes Design, während Sie die Ebenennamen und die Ausrichtung an Versalhöhe und Grundlinie beibehalten.

Hier ist die Pfadkompatibilität entscheidend: Entwerfen Sie jede Strichstärke aus demselben Pfadgerüst heraus und variieren Sie Strichbreite oder Füllgewicht, statt neu zu zeichnen. Der Arbeitsablauf „duplizieren und anpassen” in Vektorwerkzeugen ist hier der Weg mit dem geringsten Widerstand.

4. Wieder importieren und prüfen

Ziehen Sie das geänderte SVG zurück in die SF Symbols-App. Die App erzeugt die 27 Varianten und zeigt sie im Variantenraster. Prüfen Sie jede Kombination aus Strichstärke und Skalierung bei mehreren Zoomstufen; Interpolationsfehler treten häufig bei Zwischenstärken auf, die nicht sofort ins Auge fallen.

Bei Symbolen mit mehreren visuellen Elementen, etwa einem Körper plus Badge oder einem Kreis plus Innenform, öffnen Sie den Darstellungsinspektor und weisen Sie Teilpfade Ebenen zu (primary, secondary, tertiary). Diese Ebenenzuordnung bestimmt, wie das Symbol in hierarchischen, Paletten- und mehrfarbigen Modi gerendert wird.

5. Zu Xcode hinzufügen

Ziehen Sie die Symboldatei (das aus SF Symbols exportierte .svg) in den Asset Catalog von Xcode. Xcode behandelt sie als Symbol Image Set. Im Code referenzieren Sie sie so:

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

Image(_:) (ohne systemName:-Parameter) lädt aus dem Asset Catalog. Dieselben Verhaltensweisen für .symbolRenderingMode, .foregroundStyle, .symbolEffect und Dynamic Type, die bei Systemsymbolen funktionieren, funktionieren auch bei eigenen Symbolen, sofern das Symbol korrekt angelegt wurde.

Darstellungsmodi und Ebenenstruktur

Die vier Darstellungsmodi, die SF Symbols bereitstellt, funktionieren bei eigenen Symbolen genauso wie bei Systemsymbolen⁴:

• Monochrom. Eine einzelne Farbe (foregroundStyle). Der einfachste und häufigste Modus.
• Hierarchisch. Eine einzelne Farbe mit je Ebene unterschiedlicher Deckkraft. Ebenen, die im Darstellungsinspektor definiert wurden, erhalten voreingestellte Deckkräfte; der Entwickler setzt eine Tönung und bekommt die visuelle Hierarchie automatisch.
• Palette. Explizite Farbe pro Ebene. Der Entwickler übergibt mehrere foregroundStyle-Argumente; jede Ebene erhält ihre eigene Farbe.
• Mehrfarbig. Von Apple definierte feste Farben pro Ebene. Bei eigenen Symbolen sind es die Farben, die der Designer in der Multicolor-Konfiguration des Symbol Editors zuweist.

Erst die Ebenenstruktur macht hierarchische, Paletten- und mehrfarbige Darstellung sinnvoll. Ein eigenes Symbol ohne Ebenenzuweisungen legt alle Pfade in die primary-Ebene. Monochrom wird es weiterhin korrekt dargestellt, in den anderen Modi entsteht jedoch keine visuelle Hierarchie. Nehmen Sie sich bei jedem Symbol mit Tiefenwirkung die Zeit, die Ebenen im Darstellungsinspektor zuzuweisen.

Häufige Fehler

Drei Muster aus Fehlerprotokollen eigener Symbole:

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

Falsch ausgerichtete Grundlinie oder Versalhöhe. Symbole, die die Grundlinien-Hilfslinie der Vorlage ignorieren, sitzen neben Text unruhig. Das sichtbare Symptom: Das Symbol wirkt zu hoch oder zu tief, wenn es inline mit Text im .body-Textstil platziert wird. Lösung: Nutzen Sie die Referenzgeometrie der Vorlage und positionieren Sie die optische Mitte des Symbols auf der Mitte der Versalhöhe.

Keine Ebenenzuweisungen. Ein Symbol mit reicher innerer Struktur, aber ohne Ebenenzuweisungen wird nur monochrom korrekt dargestellt. Apps, die den hierarchischen oder den Palettenmodus wählen, bekommen eine flache Ausgabe. Lösung: Öffnen Sie den Darstellungsinspektor und weisen Sie jeden Teilpfad einer Ebene zu: primary für die Hauptform, secondary für Akzente, tertiary für Details dritter Ordnung.

Was dieses Muster für iOS 26+ Apps bedeutet

Drei Schlussfolgerungen.

1. Verwenden Sie eigene SF Symbols für In-App-Icons, keine rohen SVGs. Der Arbeitsablauf für eigene Symbole ist echte Entwicklungsarbeit. Die Systemintegration (Dynamic Type, Symbol Effects, Darstellungsmodi, Bedienungshilfen) macht den Aufwand aber für jedes Icon sinnvoll, das langfristig in der UI lebt. Statische SVGs passen zu einmaligen Marketing-Assets, nicht zur Kern-UI.

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

3. Weisen Sie Ebenen explizit zu, wenn ein Symbol von Darstellungsmodi profitiert. Ein Symbol, das nur monochrom funktioniert, nutzt die Hälfte des SF Symbols-Systems nicht. Der Darstellungsinspektor kostet wenige Minuten; das Ergebnis sind Symbole, die neben Systemsymbolen an hierarchischen, Paletten- und mehrfarbigen Modi teilnehmen.

Der vollständige Apple-Ecosystem-Cluster: typisierte App Intents; MCP-Server; die Routing-Frage; Foundation Models; die Unterscheidung zwischen Ausführungsumgebung und Tooling bei LLMs; drei Oberflächen; das Single-Source-of-Truth-Muster; zwei MCP-Server; Hooks für Apple-Entwicklung; Live Activities; die watchOS-Ausführungsumgebung; SwiftUI-Interna; RealityKits räumliches Denkmodell; SwiftData-Schemadisziplin; Liquid Glass-Muster; Auslieferung auf mehreren Plattformen; die Plattformmatrix; Vision Framework; Symbol Effects; Core ML-Inferenz; Writing Tools API; Swift Testing; Privacy Manifest; Bedienungshilfen als Plattform; SF Pro-Typografie; räumliche Muster in visionOS; Speech Framework; SwiftData-Migrationen; tvOS Focus Engine; @Observable-Interna; SwiftUI Layout Protocol; worüber ich nicht schreibe. Der Hub liegt in der Apple Ecosystem Series. Für den breiteren Kontext zu iOS mit KI-Agenten siehe den Leitfaden zur iOS-Agentenentwicklung.

FAQ

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

Die SF Symbols-App ist das offizielle Werkzeug und das einzige, das validierte, App-Store-kompatible eigene Symbole erzeugt. Es gibt Drittanbieterwerkzeuge und Online-Konverter, doch deren SVGs erfüllen die Anforderungen des Vorlagenformats nicht zwangsläufig. Für Produktions-Apps sollten Sie die SF Symbols-App verwenden.

Kann ich eigene Symbole unter Windows erstellen?

Die SF Symbols-App gibt es nur für macOS. Sie können die exportierte SVG-Vorlage auf jeder Plattform mit einem Vektorprogramm bearbeiten, aber Export und erneuter Import erfordern macOS. In den meisten Teams gibt es mindestens eine Designerin oder einen Designer auf macOS, die oder der diese Schritte übernehmen kann; verteilte Teams geben die SVG-Datei über Versionskontrolle oder geteilten Speicher weiter.

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

Die meisten Symbol Effects funktionieren automatisch, wenn die Symbolstruktur sauber aufgebaut ist: Bounce, Pulse, Scale und weitere Effekte werden unabhängig von der Quelle auf das Symbol angewendet. Der .replace-Inhaltsübergang braucht kompatible Strukturen zwischen Ausgangs- und Zielsymbol, etwa ähnliche Ebenenzahlen und eine ähnliche Gesamtform. Der Beitrag zu Symbol Effects in diesem Cluster behandelt das Effektvokabular im Detail.

Was ist der Unterschied zwischen einem Symbol Image Set und einem normalen Image Set in Xcode?

Ein Symbol Image Set importiert die vollständige Vorlage des Symbols (alle 27 Varianten) und führt sie durch die Rendering-Pipeline von SF Symbols. Das Symbol skaliert mit Dynamic Type, unterstützt Darstellungsmodi und funktioniert mit .symbolEffect. Ein normales Image Set ist eine statische Raster- oder SVG-Ressource, die an keinem dieser Mechanismen teilnimmt. Verwenden Sie Symbol Image Set für eigene SF Symbols.

Wie verhalten sich eigene Symbole unter visionOS und watchOS?

Genauso wie Systemsymbole: Sie werden in den von der Plattform erwarteten Größen gerendert (klein für watchOS, groß für visionOS), nutzen die Bedienungshilfen der Plattform und respektieren deren Farb- und Effektkonventionen. Das Authoring des eigenen Symbols ist einmalig; das plattformübergreifende Verhalten entsteht automatisch. Die Beiträge zur Apple-Plattformmatrix und zu räumlichen Mustern in visionOS behandeln die plattformspezifischen Überlegungen.

Welche Auswirkungen hat das auf die App-Store-Prüfung?

Keine besonderen. Eigene SF Symbols werden wie andere Asset-Catalog-Assets geprüft. Die Richtlinien zum visuellen Stil gelten wie bei anderen eigenen Grafiken: Apples UI-Muster nicht imitieren, Markenrechte nicht verletzen. Ansonsten behandelt der Prüfprozess sie als Standard-Bildassets.

Quellen