⚡UI Komponenten

Icon-Systeme einrichten (Lucide)

Saubere Icons ohne SVG-Chaos

Hunderte SVG-Dateien manuell verwalten ist ein Albtraum. Lucide Icons gibt dir ueber 1400 konsistente, tree-shakable Icons die sich perfekt in React und Tailwind einfuegen. Ein Import, fertig.

Pro-Tip — Der schnelle Weg
Erstell eine zentrale Icon-Komponente die Lucide-Icons mappt. So kannst du spaeter das gesamte Icon-System austauschen ohne jede Datei anzufassen.
Seite 1
1

Lucide installieren

Installiere das Lucide React Paket. Es ist tree-shakable, das heisst nur die Icons die du importierst landen im Bundle. Kein Bloat.

npm install lucide-react
2

Icons importieren und nutzen

Importiere jedes Icon einzeln. Die Komponenten akzeptieren size, color und className Props. Perfekt fuer Tailwind Styling.

import { Home, Settings, User, ChevronRight } from 'lucide-react';


<Home size={24} className='text-blue-500' />
<Settings className='w-5 h-5 text-gray-400' />
3

Icon-Map fuer dynamische Icons

Wenn du Icons dynamisch rendern willst, bau eine Map. Das ist perfekt fuer Navigationen oder Dashboards wo der Icon-Name aus einer Config kommt.

import { Home, Settings, User, BarChart } from 'lucide-react';


const iconMap = { home: Home, settings: Settings, user: User, chart: BarChart };


function DynIcon({ name, ...props }) {
 const Icon = iconMap[name];
 return Icon ? <Icon {...props} /> : null;
}
4

Konsistente Groessen definieren

Definiere feste Groessen fuer dein Projekt damit Icons ueberall gleich aussehen. Klein fuer Inline, Medium fuer Buttons, Gross fuer Feature-Sections.

const iconSizes = { sm: 16, md: 20, lg: 24, xl: 32 };


function Icon({ name, size = 'md', className }) {
 const LucideIcon = iconMap[name];
 return <LucideIcon size={iconSizes[size]} className={className} />;
}
Seite 2
Warum das funktioniert
  • Tree-Shaking bedeutet du zahlst nur fuer Icons die du wirklich nutzt
  • Konsistentes Design-System weil alle Icons den gleichen Stil haben
  • TypeScript-Support gibt dir Autocomplete fuer alle verfuegbaren Icons
  • Eine Icon-Map macht dynamische UIs moeglich ohne hartcodierte Imports
Tipps
  • Importiere Icons einzeln, nicht das gesamte Paket, sonst explodiert dein Bundle
  • Nutze strokeWidth={1.5} fuer duennere, modernere Icons
  • Lucide Icons sind alle 24x24, skaliere sie mit size oder Tailwind w/h Klassen
  • Fuer animierte Icons kombiniere Lucide mit Tailwind animate-spin oder animate-pulse
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen