Hub · 55 Tools · 5 Bereiche

Icons, Schriften, Farbe, 3D und Shader

Der letzte Anstrich für ein Interface. Icon-Sets mit React-Paketen, Schriften und Typografie-Tools, Farbsysteme für UI und die 3D- und Shader-Tools, die Tiefe schaffen – ganz ohne Render-Farm.

01 / 05

Icon-Bibliotheken für React und das Web

30Bereich öffnen

Lucide preview

LucideIconsEin offenes, community-geführtes Icon-Set, das von Feather geforkt wurde und Tausende Glyphen für Interfaces bietet.

phosphoricons.com

Phosphor preview

PhosphorIconsEine flexible Icon-Familie, die in sechs einheitlichen Strichstärken für Interface-Design verfügbar ist.

Iconify preview

IconifyIconsEin einheitliches Framework, das eine riesige Auswahl an Icons sofort griffbereit macht.

Rune Icons preview

Rune IconsIconsEin minimalistisches Icon-Set, das in fünf unterschiedlichen Stilen für deine Interfaces kommt.

Icon MuseumIconsEin Archiv, das die Handwerkskunst hinter herausragenden Mobile-App-Icons würdigt.

Tabler Icons preview

Tabler IconsIconsEine Bibliothek mit Tausenden Icons im Outline-Stil zum Bauen von Benutzeroberflächen.

Heroicons preview

HeroiconsIconsHandgefertigte SVG-Icons, erstellt vom Team hinter dem Tailwind CSS-Framework.

fonts.google.com

Material Symbols preview

Material SymbolsIconsGoogles variable Icon-Schrift, die drei wählbare Stile für Interfaces bietet.

icons.getbootstrap.com

Bootstrap Icons preview

Bootstrap IconsIconsDie offizielle SVG-Icon-Bibliothek, gebaut als Ergänzung zum Bootstrap-Framework.

Remix IconIconsEine neutral wirkende Icon-Bibliothek, die in einer Outline- und einer gefüllten Variante verfügbar ist.

Iconoir preview

IconoirIconsEin quelloffenes SVG-Icon-Set, gezeichnet mit einheitlichen, gleichmäßigen Strichstärken.

Ionicons preview

IoniconsIconsEin ausgefeiltes Icon-Pack, das für den Einsatz in Web- und Mobile-Interfaces gestaltet ist.

simpleicons.org

Simple Icons preview

Simple IconsIconsEine Sammlung von über 3.000 beliebten Markenlogos, jedes im SVG-Format verfügbar.

theSVG preview

theSVGIconsEin kuratiertes Set sauberer, einsatzfertiger Markenlogos, geliefert im SVG-Format.

feathericons.com

Feather preview

FeatherIconsEin minimalistisches, quelloffenes Icon-Set, bei dem jede Glyphe auf einem 24-Pixel-Raster gezeichnet ist.

carbondesignsystem.com

Carbon Icons preview

Carbon IconsIconsIBMs offizielle Icon-Bibliothek, gemacht für Produktdesigns auf Enterprise-Niveau.

Boxicons preview

BoxiconsIconsEin Set von Vektor-Icons, gestaltet und angeboten in drei unterschiedlichen visuellen Stilen.

mx-icons.vercel.app

MX Icons preview

MX IconsIconsEine große, anpassbare Icon-Sammlung, verpackt als React-Komponenten.

akveo.github.io

Eva Icons preview

Eva IconsIconsEin Paket mit 400 Icons, verfügbar im Outline- und im gefüllten Stil für Interfaces.

Devicon preview

DeviconIconsEin Icon-Set, das beliebte Programmiersprachen und Entwickler-Tools abdeckt.

css.gg preview

css.ggIconsEin Set von 700 leichtgewichtigen Icons, die vollständig in reinem CSS statt in SVG gerendert werden.

HugeIcons preview

HugeIconsIconsEine umfangreiche Icon-Bibliothek, die Icons im Stroke- und im Solid-Stil bietet.

Reicon preview

ReiconIconsEine tree-shakeable React-Icon-Bibliothek, die Icons in zwei unterschiedlichen Strichstärken liefert.

Iconsax preview

IconsaxIconsEin vielseitiges Icon-Set, das in sechs unterschiedlichen visuellen Stilen für UI-Arbeit kommt.

icons0 preview

icons0IconsEine Suchmaschine, mit der du Icons aus über 200.000 Optionen findest.

heroicons-animated.com

Heroicons Animated preview

Heroicons AnimatedIconsHeroicons, überarbeitet mit per Hover ausgelösten Animationen für interaktive UIs.

Icons.download preview

Icons.downloadIconsEine kuratierte Icon-Bibliothek mit sechzehn verschiedenen ästhetischen Stilen zur Auswahl.

lucide-animated.com

Lucide Animated preview

Lucide AnimatedIconsDas Lucide-Icon-Set, überarbeitet mit integrierten Mikroanimationen für lebendige Interfaces.

iconfoundry.store

Icon FoundryIconsEin durchsuchbares Archiv, das Icons aus vielen verschiedenen Familien zusammenführt.

Inkword preview

InkwordIconsGib ein einzelnes Wort ein und das Tool erzeugt eine passende Illustration dazu.

02 / 05

Schriften und Typografie-Tools für Websites

7Bereich öffnen

Fontshare preview

FontshareSchriftenEine Bibliothek professioneller Schriften, die kostenlos in kommerziellen Projekten genutzt werden dürfen.

Klim preview

KlimSchriftenEine Schriftgießerei, die zeitgenössische Schriften für den Einsatz im gesamten Web gestaltet.

Fontsource preview

FontsourceSchriftenHoste quelloffene Schriften selbst, indem du sie als npm-Pakete in deinem Projekt installierst.

wakamaifondue.com

Wakamai Fondue preview

Wakamai FondueSchriftenEin Tool, das Schriftdateien untersucht und offenlegt, welche Features jede einzelne unterstützt.

Utopia preview

UtopiaSchriftenEin Rechner für fluide Typografie, der einsatzfertige CSS-clamp-Werte ausgibt.

Velvetyne preview

VelvetyneSchriftenEine quelloffene Schriftgießerei, die experimentelle, frei lizenzierte Schriften verbreitet.

departuremono.com

Departure Mono preview

Departure MonoSchriftenEine Monospace-Schrift im Pixel-Stil, die sich im Terminal wie zu Hause anfühlt.

03 / 05

Farbtools für Interface-Design

5Bereich öffnen

OKLCH preview

OKLCHFarbeEin Color-Picker auf Basis eines wahrnehmungsgleichmäßigen Farbraums zur Auswahl von UI-Farben.

Color.review preview

Color.reviewFarbeEin Kontrastprüfer, der dir hilft, Farbpaletten zu bauen, die barrierefrei bleiben.

huetone.ardov.me

Huetone preview

HuetoneFarbeEin Palettengenerator, der Kontrastverhältnisse ausbalanciert, damit UI-Farben barrierefrei bleiben.

APCA preview

APCAFarbeEin moderner Kontrastalgorithmus, der damit übereinstimmt, wie das Auge Farbe tatsächlich wahrnimmt.

Ramps preview

RampsFarbeEin Design-Token-Tool, um sanfte Farbrampen im OKLCH-Raum zu generieren.

04 / 05

3D-Tools und Assets für das Web

6Bereich öffnen

Three.js preview

Three.js3DEine JavaScript-Bibliothek, um 3D-Grafik mit WebGL im Browser zu erstellen und darzustellen.

r3f.docs.pmnd.rs

React Three Fiber preview

React Three Fiber3DEin deklarativer React-Renderer, mit dem du Three.js-Szenen als Komponenten aufbaust.

drei.docs.pmnd.rs

Drei preview

Drei3DEine Sammlung fertiger Hilfskomponenten, die React Three Fiber-Projekte beschleunigen.

Blender preview

Blender3DEine quelloffene Suite für 3D-Modellierung, Animation und das Rendern von Szenen fürs Web.

gltf.report preview

gltf.report3DEin Browser-Tool, das glTF-Assets untersucht und verschlankt, damit 3D-Modelle im Web schneller laden.

Poly Haven preview

Poly Haven3DEine öffentliche Bibliothek CC0-lizenzierter Texturen, die sich kostenlos herunterladen und in jedem Projekt wiederverwenden lassen.

05 / 05

WebGL-Shader und Shader-Gradienten

7Bereich öffnen

thebookofshaders.com

Book of Shaders preview

Book of ShadersShaderEin interaktiver, praxisnaher Leitfaden, der dir Schritt für Schritt beibringt, wie man Fragment-Shader schreibt.

compute.toys preview

compute.toysShaderEine Online-Sandbox, um WGSL-Compute-Shader zu schreiben und mit ihnen zu experimentieren.

Shaderfrog preview

ShaderfrogShaderEin node-basierter visueller Editor, um Shader durch Verbinden von Graph-Knoten zu bauen.

shadercn preview

shadercnShaderReact-Shader-Komponenten, die du in Projekte einfügen kannst, aufgebaut auf vgpu und TypeGPU.

shaders.paper.design

Paper Shaders preview

Paper ShadersShaderImportfertige Shader, die ohne jegliche Abhängigkeiten für deine Webprojekte kommen.

openshaders.com

OpenShaders preview

OpenShadersShaderEine quelloffene Bibliothek von WebGL-Shadern, die sich direkt in deine Webprojekte einfügen lassen.

orbkit.zzzzshawn.cloud

Orbkit preview

OrbkitShaderEin WebGL-gestützter Renderer, um animierte Orb-Effekte im Browser zu erstellen.

Icons, Schriften, Farbe, 3D- & Shader-Tools (55) — Designeer