Modul 18

Bilder & Icons

Icons und Bilder sind keine Dekoration — sie sind Kommunikationswerkzeuge. Ein konsistentes Icon-Set und richtig eingebundene Bilder machen den Unterschied zwischen „zusammengeklickt" und „durchdacht designed".

Lernziele

Vektor (SVG) vs. Pixel (PNG/JPG/WebP) — wann du welches Format einsetzt
Stroke- vs. Fill-Icons: Stil wählen, konsistent bleiben, Stroke-Width richtig skalieren
Icons korrekt mit Text pairen: Größe, Farbe und Gewichtung ausbalancieren
Bilder layoutsicher einbinden: object-fit, aspect-ratio, Background-Bleed-Schutz
Text auf Bildern lesbar machen: Gradient-Overlays und alternative Techniken

Kerngedanke

Vektor vs. Pixel — Grundregeln

SVG für alles Gezeichnete: Icons, Logos, Illustrationen — skaliert verlustfrei. WebP/JPG für Fotos (beste Kompression), PNG nur bei Transparenz-Bedarf.

Die 6 Grundregeln

SVG für Icons & Logos

Skaliert verlustfrei auf jede Größe, kleinste Dateigrößen

WebP/JPG für Fotos

Beste Kompression für Bilder, modernes Format

PNG nur für Transparenz

Größere Dateigrößen, nutze nur wenn Transparenz nötig ist

Stroke-Icons

Leicht und modern, bestehen aus offenen Linien, ideal neben Text

Fill-Icons

Schwer und auffällig, ideal für aktive Zustände und alleinstehende Icons

object-fit ist dein bester Freund

User-Bilder haben unvorhersehbare Proportionen — feste Container + object-fit lösen das

Stroke vs. Fill: Konsistenz bewahren

Im selben UI-Bereich einen Stil wählen und durchhalten. Der einzige akzeptable Mix: aktiv/inaktiv-Zustände.

Stroke Icons (Modern, Leicht)

Fill Icons (Solid, Auffällig)

Icon-Text Pairing

Icons korrekt mit Text pairen: Größe, Farbe und Gewichtung ausbalancieren. Icon-Größe und Font-Size sollten harmonieren.

Icon korrekt mit Text gepairt

Icon zu groß — wirkt unausgewogen

Bilder: object-fit rettet dein Layout

Feste Container + object-fit: cover verhindert Layout-Brüche. aspect-ratio sichert Proportionen auch bei unterschiedlichen Bildformaten.

Ohne object-fit (Layout bricht)

Bild verzerrtes Seitenverhältnis

Mit object-fit: cover (sicher)

Bild perfekt ausgefüllt

Text auf Bildern: Kontrast sicherstellen

Bilder sind dynamisch — weißer Text auf hellem Bereich verschwindet. Gradient-Overlays sichern konsistenten Kontrast.

Ohne Overlay (unleserlich)

Headline über hellem Bild

Mit Gradient-Overlay (lesbar)

Headline lesbar über Bild

Icon Playground

<"le-hl-attr">class="le-hl-tag">div "le-hl-attr">style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: center; justify-items: center; min-height: 200px; background: #f5f5f5; border-radius: 8px; padding: 24px;">
  <"le-hl-attr">class="le-hl-tag">div "le-hl-attr">style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
    <"le-hl-attr">class="le-hl-tag">svg "le-hl-attr">width="24" "le-hl-attr">height="24" "le-hl-attr">viewBox="0 0 24 24" "le-hl-attr">fill="none" "le-hl-attr">stroke="currentColor" "le-hl-attr">stroke-width="2">
      <"le-hl-attr">class="le-hl-tag">circle "le-hl-attr">cx="12" "le-hl-attr">cy="12" "le-hl-attr">r="10"></"le-hl-attr">class="le-hl-tag">circle>
    </"le-hl-attr">class="le-hl-tag">svg>
    <"le-hl-attr">class="le-hl-tag">span "le-hl-attr">style="font-size: 12px; color: #666;">24px Stroke</"le-hl-attr">class="le-hl-tag">span>
  </"le-hl-attr">class="le-hl-tag">div>
  <"le-hl-attr">class="le-hl-tag">div "le-hl-attr">style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
    <"le-hl-attr">class="le-hl-tag">svg "le-hl-attr">width="32" "le-hl-attr">height="32" "le-hl-attr">viewBox="0 0 24 24" "le-hl-attr">fill="none" "le-hl-attr">stroke="currentColor" "le-hl-attr">stroke-width="2">
      <"le-hl-attr">class="le-hl-tag">circle "le-hl-attr">cx="12" "le-hl-attr">cy="12" "le-hl-attr">r="10"></"le-hl-attr">class="le-hl-tag">circle>
    </"le-hl-attr">class="le-hl-tag">svg>
    <"le-hl-attr">class="le-hl-tag">span "le-hl-attr">style="font-size: 12px; color: #666;">32px Stroke</"le-hl-attr">class="le-hl-tag">span>
  </"le-hl-attr">class="le-hl-tag">div>
  <"le-hl-attr">class="le-hl-tag">div "le-hl-attr">style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
    <"le-hl-attr">class="le-hl-tag">svg "le-hl-attr">width="48" "le-hl-attr">height="48" "le-hl-attr">viewBox="0 0 24 24" "le-hl-attr">fill="currentColor">
      <"le-hl-attr">class="le-hl-tag">circle "le-hl-attr">cx="12" "le-hl-attr">cy="12" "le-hl-attr">r="10"></"le-hl-attr">class="le-hl-tag">circle>
    </"le-hl-attr">class="le-hl-tag">svg>
    <"le-hl-attr">class="le-hl-tag">span "le-hl-attr">style="font-size: 12px; color: #666;">48px Fill</"le-hl-attr">class="le-hl-tag">span>
  </"le-hl-attr">class="le-hl-tag">div>
</"le-hl-attr">class="le-hl-tag">div>

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: center; justify-items: center; min-height: 200px; background: #f5f5f5; border-radius: 8px; padding: 24px;">
  <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <span style="font-size: 12px; color: #666;">24px Stroke</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <span style="font-size: 12px; color: #666;">32px Stroke</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
    <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
      <circle cx="12" cy="12" r="10"></circle>
    </svg>
    <span style="font-size: 12px; color: #666;">48px Fill</span>
  </div>
</div>

UI Components

Responsive Design