Einheitliche visuelle Sprache in einer Multi-Team React Library

Eine zentrale React Component Library zu pflegen verlangt strikte Grenzen. Wenn fünf verschiedene Produktteams deine UI-Komponenten nutzen, endet das meistens im Desaster. Ohne einheitliches System verfällt die Optik schnell. Entwickler fangen an, eigene willkürliche Inline-Styles einzubauen.

Mein Wendepunkt kam bei einem routinemäßigen Anwendungs-Audit. Wir hatten vierzehn Varianten eines simplen Zahnrad-Icons. Manche mit kaum sichtbaren 1px-Strichen. Andere komplett schwarz gefüllte Kleckse. Ein paar verschnörkelte Vektorgrafiken wirkten neben unserer minimalistischen Typografie absurd. Das Chaos hatte die Codebasis komplett übernommen.

Icons über mehrere Produkte hinweg zu standardisieren braucht eine riesige, konsistente Single Source of Truth. Genau diese Erkenntnis brachte mich dazu, Icons8 in unsere Frontend-Architektur zu integrieren.

Raus aus der Asset-Falle

An einem späten Donnerstagnachmittag vor einem großen Release brach Panik aus. Das Analytics-Team brauchte eine spezielle Datenbank-Rollback-Grafik für ein neues Feature-Toggle. Gleichzeitig wollte die Billing-Abteilung ein optisch identisches Set für die Überarbeitung der Preistabelle. Unser bestehendes Open-Source-Paket hatte beides nicht.

Ich verbrachte drei quälende Stunden damit, eine generische Vektordatei zurechtzubiegen. Die exakte Strichstärke von 1,5px und den Eckenradius unserer bestehenden Assets zu treffen war zum Verzweifeln. Vektorpfade für kleine UI-Updates von Hand nachzuziehen verschwendet wertvolle Engineering-Zeit.

Wir brauchten eine visuelle Bibliothek, die komplexe Enterprise-Software direkt out of the box unterstützt.

Die Alternativen am Markt

Einfache Icons online zu finden ist lächerlich leicht. Tausende davon zu finden, die alle exakt auf demselben mathematischen Raster gestaltet sind, ist harte Arbeit.

Open-Source-Bibliotheken wie Feather oder Heroicons funktionieren perfekt für einfache Landingpages. In großen Anwendungen brechen sie schnell zusammen. Mit nur ein paar hundert Assets läufst du unweigerlich gegen eine Wand. Hochspezifische Engineering-Konzepte gibt es in Basis-Paketen schlicht nicht. Am Ende zeichnest du selbst oder mischst furchtbar unpassende Grafiken dazu.

Plattformen wie Noun Project oder Flaticon lösen das Mengenproblem. Dafür holen sie sich sofort massive Konsistenzprobleme ins Haus. Weil sie Vektorarbeiten von tausenden unabhängigen Kreativen bündeln, liefert die Suche nach einer Profilgrafik fünfzig völlig unterschiedliche künstlerische Interpretationen. Ein detailliertes, stark schattiertes Icon neben einer flachen Grafik lässt jede Software-Oberfläche sofort billig wirken.

Alles selbst zu bauen liefert perfekte Konsistenz. Dieser Weg verlangt aber festangestellte Illustratoren. Die meisten Engineering-Abteilungen können sich keine Auftragsvektoren für jedes neue Dropdown-Menü leisten.

Icons8 besetzt einen Sweet Spot mit einem kompletten In-House-Designteam. Sie produzieren riesige, skalierbare Asset-Sets nach strengen visuellen Stilvorgaben.

Basis-Komponenten standardisieren

Mein erstes Ziel war der Ersatz unserer stark fragmentierten Basis-Assets. Icons8 teilt die gesamte Bibliothek in über 45 verschiedene Stile ein. Wir entschieden uns sofort für den Stil iOS 17 Outlined. Er enthält über 30.000 Icons. Diese schiere Menge garantierte, dass uns auch für obskure Sonderfälle nie die passenden Grafiken ausgehen.

Der Aufbau unseres neuen React-Navigationsmoduls startete direkt im Web-Interface. Für die komplexen Paginierungs-Controls suchte ich zuerst ein grundlegendes Pfeil-Icon. Die gefilterten Ergebnisse passten perfekt zu unserem gewählten iOS-17-Stil.

Statt es sofort herunterzuladen, klickte ich das Asset an. Ein intuitiver In-Browser-Editor öffnete sich. Unsere Frontend-Komponenten brauchten exakte Innenabstände. Also passte ich das Padding an und skalierte die Grafik direkt online.

Dann kam das mächtige Subicon-Feature. Ein kleines Schloss-Symbol über den Pfeil gelegt, und unsere gesperrten Navigationspfade waren sofort abgebildet.

Diese Subicons lassen sich direkt im Browser skalieren und umfärben. Ganz ohne dedizierte Vektorsoftware.

Fertige Grafiken wanderten direkt in eine eigene Collection. Unseren primären Marken-Hexcode bekam das ganze Set über das Bulk-Recolor-Tool. Danach lud ich alles als ein einziges SVG-Sprite herunter. Dieses saubere, standardisierte Sprite in unsere React-Codebasis einzubauen dauerte Minuten statt Stunden.

Lottie-Animationen einbauen

Die Mobile-Entwickler wollten irgendwann die Mikro-Interaktionen der Tab-Bar aufwerten. Sie brauchten animierte Feedback-Zustände, die exakt zu unseren frisch standardisierten statischen Grafiken passen.

Icons8 hat einen eigenen Bereich nur für animierte Assets. Die gefilterte Suche zeigte ausschließlich Animationen innerhalb unserer Stilvorgaben. Über 4.500 Optionen füllten den Bildschirm. Exakte Treffer für die Tabs Home, Profil und Einstellungen zu finden dauerte keine Zeit. Der direkte Export im Lottie-JSON-Format hat uns komplett gerettet.

Lottie nutzt mathematische Vektoren statt klobiger Rasterframes. Die Dateien bleiben winzig. Alles rendert makellos auf hochauflösenden mobilen Retina-Displays.

Die JSON-Dateien in unseren React-Native-Tab-Navigator zu integrieren hieß einfach, die Daten direkt an die Lottie-Wrapper-Komponente zu übergeben. Die Animationen liefen flüssig und behielten exakt die Strichstärken unserer statischen Desktop-UI.

Wo die Plattform hinter den Erwartungen von Entwicklern zurückbleibt

Kein Tool passt auf jede Engineering-Anforderung. Wer mit striktem Null-Budget arbeitet, wird hier garantiert frustriert.

Die kostenlosen Stufen sind stark eingeschränkt. PNG-Dateien sind auf 100px Größe gedeckelt. Alle Dateiformate gibt es nur für drei sehr spezifische Kategorien wie Popular oder Logos. Sich in der modernen Webentwicklung auf PNGs zu verlassen ist ein komplettes No-Go. Retina-Displays verlangen immer gestochen scharfe Vektorgrafiken. Produktionsreife SVGs gibt es nur mit aktivem Bezahl-Abo.

Und ein dicker Haken: die Pflicht zur Attribution. Ein Hyperlink zurück zur Plattform muss in deine Anwendung eingebaut werden. Enterprise-SaaS-Plattformen können keine externen Attributionslinks über ihre Oberflächen verteilen. Die einzige valide Option ist, für die Entfernung dieser Pflicht zu bezahlen.

Auch bei Nischen-Features zeigt die Bibliothek Lücken. Spezialisierten medizinischen oder industriellen Anwendungen können hochspezifische Grafiken im gewählten Stil fehlen. Ideen über das Icon-Request-Feature einzureichen hilft ein wenig. Die Produktion startet aber erst nach acht Community-Stimmen. Diesen Zeitplan vorherzusagen ist völlig unmöglich. Wer die Grafik für den Sprint von morgen braucht, hat Pech.

Dann lieber selbst zeichnen.

Das Tool in den Arbeitsalltag integrieren

Für die tägliche Nutzung braucht es ein paar konkrete Praktiken, um massive technische Schulden zu vermeiden.

• Vereinfachte Vektoren deaktivieren: Downloads vereinfachen SVG-Pfade standardmäßig stark. Schalte diese Einstellung in den Präferenzen ab, bevor du später in Figma an den Knoten arbeitest.
• Desktop-Integrationen nutzen: Installiere die Pichon Mac-App. Umgehe den Browser komplett und zieh unkomprimierte Assets direkt in deine IDE.
• Mit Base64 prototypen: Schnelles Prototyping braucht maximales Tempo. Nutze den Base64-HTML-Fragment-Export. Füge die codierten Strings direkt in Inline-Image-Tags ein. Spar dir lokales Dateimanagement, bis die Interface-Designs final sind.
• Zentrale Collections pflegen: Lass nicht jeden Entwickler Grafiken auf eigene Faust herunterladen. Lege geteilte Collections online an. Erzeuge geklonte Share-Links, damit die gesamte Engineering-Abteilung aus exakt derselben kuratierten Liste zieht.

Komplexe Component Libraries zu bauen verlangt ernsthafte Engineering-Disziplin. Die Basis-Asset-Erstellung an eine riesige, stilkontrollierte Plattform auszulagern ändert alles. Du hörst für immer auf, dir über inkonsistente Strichstärken Sorgen zu machen. Konzentrier dich ganz aufs Schreiben brillanter Anwendungslogik.