SVG-Icons für UI-Design: Das komplette Handbuch 2026

Warum SVG-Icons die einzige ernsthafte Wahl für Produktions-UI sind

Icon-Fonts hatten ihren Moment. PNG-Sprites auch. Beide sind Schwachstellen in jedem Design System, das über Breakpoints, Farbthemen und Barrierefreiheitsanforderungen skalieren muss. SVG-Icons sind die einzige architektonisch solide Wahl für Teams, die Produktionsinterfaces ausliefern.

Ein SVG-Icon ist ein erstklassiger DOM-Knoten. Es reagiert auf CSS Custom Properties, nimmt am Accessibility-Tree teil, skaliert ohne Qualitätsverlust und animiert mit Standard-CSS-Transitions. Icon-Fonts kapern den Unicode Private Use Area, versagen unter Font-Blocking-Richtlinien und bieten genau eine Farbe pro Glyphe.

"

Icons sind das Vokabular einer Benutzeroberfläche. Stimmt das Vokabular nicht, wird jeder Satz, den das Produkt spricht, verwirrend.

Icon-Design-Prinzipien: Raster, Strich und optische Konsistenz

Der 24×24-Raster-Standard

Jedes Icon in einem kohärenten System beginnt auf der gleichen Leinwand. Das 24×24-Pixel-Raster teilt sich gleichmäßig in gängige Größen (12, 16, 20, 48) und richtet sich an einem 1 px-Unter-Raster aus, was optische Fehlausrichtungen eliminiert, wenn Icons neben Text oder in Buttons stehen.

Strichkonsistenz und visuelles Gewicht

Ein 2 px-Strich bei 24×24 skaliert vorhersagbar: bei 16 px wird er ~1,33 px (scharf auf 2x-Displays), bei 48 px wird er 4 px. Der Fehler, den Teams machen, ist das Mischen von 1,5, 2 und 3 px-Strichen in einem Set.

• Eine Strichstärke pro Set. Wähle 1,5 px oder 2 px und setze es global durch.
• Konsistente End- und Verbindungsstile. Runde Enden passen zu runden Verbindungen. Niemals mischen.
• Optische Korrektur für Kurven. Ein 20 px-Kreis wirkt kleiner als ein 20 px-Quadrat — auf 20,5 px anpassen.

SVG-Icon-System-Architektur

Vier dominante Muster existieren für die Auslieferung von SVG-Icons an den Browser. Jedes hat Kompromisse je nach Framework, Gewichtsbudget und Caching-Strategie.

SVG-Sprite-Pattern

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <polyline points="20,6 9,17 4,12" fill="none"
      stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<svg width="24" height="24" aria-hidden="true">
  <use href="#icon-check"/>
</svg>

React-Komponenten-Pattern

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  label?: string;
}

export function CheckIcon({ size = 24, label, ...props }: IconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={2}
      role={label ? 'img' : undefined}
      aria-label={label} aria-hidden={label ? undefined : true}
      {...props}>
      <polyline points="20,6 9,17 4,12" />
    </svg>
  );
}

Barrierefreiheits-Anforderungen

Jedes SVG-Icon ist entweder dekorativ oder bedeutungstragend. Jedes hat eine nicht verhandelbare Implementierung.

Dekorativ (neben sichtbarem Text — vor Screenreadern verbergen):

<button>
  <svg aria-hidden="true" focusable="false"><!-- Icon --></svg>
  Dokument speichern
</button>

Bedeutungstragend (einziges interaktives Element — muss sich ankündigen):

<button aria-label="Dialog schließen">
  <svg role="img" aria-labelledby="close-title" focusable="false">
    <title id="close-title">Schließen</title>
    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Dark Mode und Theming mit CSS Custom Properties

Ein gut architekturtes Icon-System themiert sich automatisch. Der Mechanismus ist currentColor kombiniert mit CSS Custom Properties:

:root {
  --icon-color-primary: #1a1a2e;
  --icon-color-success: #059669;
  --icon-size-md: 24px;
  --icon-stroke: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --icon-color-primary: #e5e7eb;
    --icon-color-success: #34d399;
  }
}

.icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: var(--icon-color-primary);
  stroke-width: var(--icon-stroke);
  transition: stroke 0.2s ease;
}

Der Wechsel zum Dark Mode ist eine Null-Icon-Code-Änderung. Die Tokens aktualisieren sich und jedes Icon folgt. Für Multi-Brand-Theming füge eine .theme-brand-b-Klasse hinzu, die dieselben Properties überschreibt.

Performance-Optimierung

Lasse jedes Icon durch den SVG-Optimierer von VectoSolve oder SVGO laufen, bevor du commitest. Ein typisches 24×24-Icon sollte nach der Optimierung zwischen 200 und 500 Bytes wiegen.

• Inline SVG für kritische Icons above-the-fold (Navigation, Hero-CTAs). Null Netzwerk-Overhead.
• Externes Sprite-Sheet für Icons below-the-fold. Eine Anfrage, langer Cache.
• Dynamisches import() für selten gesehene Icons (Admin-Panels, Fehlerzustände).

Setze immer explizite width und height auf SVG-Elemente, um Cumulative Layout Shift (CLS) zu vermeiden — eine Core-Web-Vitals-Strafe.

Figma-zu-SVG-Export-Workflow

1. In Figma organisieren. Eigene Icons-Seite. Jedes Icon in einem 24×24-Frame namens icon/check, icon/alert-triangle, etc.
2. Abflachen und vektorisieren. Boolesche Gruppen abflachen und Striche vor dem Export vektorisieren.
3. Als SVG exportieren. Figmas nativen Export mit "Outline text" an und "Include id" aus verwenden.
4. Optimieren. Durch den VectoSolve-Optimierer leiten, um Metadaten zu entfernen und Präzision zu reduzieren.
5. Validieren. Bestätigen, dass Pfade bei 16, 24 und 48 px korrekt rendern.
6. Komponenten generieren. SVGR oder ein Custom-Script verwenden, um SVGs in Framework-Komponenten umzuwandeln. Sowohl .svg-Dateien als auch generierte Komponenten committen.

Icon-Animation und Micro-Interactions

Subtile Animation verwandelt statische Icons in reaktives Feedback. Die besten Icon-Animationen sind unter 300 ms und vermitteln eine klare Zustandsänderung.

Strich-Zeichnen-Animation

.icon-check polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.checkbox:checked + .icon-check polyline {
  stroke-dashoffset: 0;
}

Rotation und Morphing

.icon-loading { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Baue dein Icon-System heute

Ein produktionsreifes SVG-Icon-System ist eine Investition in jedes Interface, das dein Team ausliefert. Beginne mit dem Raster. Setze den Strich durch. Automatisiere die Pipeline.

VectoSolve bietet Tools zum Konvertieren, Optimieren und Bearbeiten von SVG-Icons in jeder Phase — von der Raster-zu-Vektor-Konvertierung bis zur SVG-Optimierung und Live-SVG-Bearbeitung. Dein Icon-System ist das Vokabular, das dein Produkt zur Kommunikation nutzt. Mache jede Glyphe zählend.

Quellen und weiterführende Lektüre

• MDN Web Docs: SVG Icons — Technische Referenz für SVG-Elemente, ARIA-Rollen und barrierefreies Icon-Markup
• CSS-Tricks: SVG Icon Systems — Vollständiger Leitfaden zum Aufbau von SVG-Sprite-Sheets und Icon-Komponentenbibliotheken
• web.dev: Web Performance — Googles Best Practices für effizientes Laden und Rendern von Icon-Assets
• Smashing Magazine: Icon Design — UI-Design-Prinzipien für konsistente, pixel-perfekte Icon-Systeme