🎨 Icons (Lucide in Expo/React Native)
1 Min. Lesezeit
Icons sind kleine, grafische Symbole, die Nutzern visuell helfen, sich in einer App zurechtzufinden. Mit Lucide Icons lassen sich moderne, minimalistische und konsistente Symbole einbauen – z. B. ein Mülleimer für „Löschen“, ein Stift für „Bearbeiten“ oder ein Auge für „Anzeigen“. Die Verwendung von Icons macht deine App visuell klarer, intuitiver und professioneller.
🔧 Technische Erklärung – Lucide in React Native / Expo
Lucide ist ein Fork von Feather Icons – weiterentwickelt mit besserer Pflege und neuen Symbolen.
Eigenschaften:
Konsistente Linien-Icons im Feather-Stil
Über 400+ Symbole, regelmäßig erweitert
Beliebig skalierbar durch SVG-Basis
Perfekt für Dark Mode, da farblich flexibel
Ideal kombinierbar mit Buttons, Navigation, Formularen etc.
💡 Einsatzmöglichkeiten
Navigationsleisten (Tab Bar, Drawer, Header)
Action-Buttons (Löschen, Bearbeiten, Senden, Zurück)
Statusanzeigen (z. B. Warnung, Erfolg, Info)
Interaktive UI-Elemente (z. B. Passwort zeigen, Medien steuern)
Listen und Übersichten visuell strukturieren
Onboarding & Gamification visuell untermalen
❓ Wichtige Fragen und Antworten zu Lucide Icons
Warum Lucide statt FontAwesome oder Material Icons?
Lucide ist leichtgewichtig, modern und konsistent – besonders geeignet für minimalistische, barrierearme UI-Designs und moderne App-Projekte.
Wie finde ich die richtigen Lucide Icons?
Nutze die offizielle Seite: https://lucide.dev/icons
→ Du findest Namen, Varianten und Live-Vorschau
Funktionieren Lucide Icons auch im Dark Mode?
Ja – die Icons sind vektorbasiert und farblich anpassbar. Du kannst sie per color an deine Themes binden (z. B. "text-white" oder "text-neutral-900").
Sind die Icons barrierefrei?
Icons sollten mit accessibilityLabel versehen oder von erklärendem Text begleitet werden. Verwende außerdem große Touch-Zonen und Kontraste.
Kann ich Lucide Icons auch dynamisch ändern (Hover, Aktiv, etc.)?
Ja – du kannst Farbe, Größe oder Icon selbst je nach Zustand ändern, z. B. bei isActive, isFocused oder onPress.