Icons, die sich bewegen, verwandeln und verschmelzen.
Eigens gezeichnete Icons auf einem 24er-Raster mit variablen Achsen für Strichstärke, Ecken und Stil, einer Morph-Engine, Fusion, Modifikator-Badges und lebendigen Zuständen. Dieselben Props in React, Vue, Svelte, Angular, Web Components, Tailwind und der CLI.
- Icons
- 0
- Achsen
- 3
- Fusions-Layouts
- 7
- Modifikatoren
- 11
- lebendige Zustände
- 7
glyphfox 1.0 in zweieinhalb Minuten.
Jedes Icon, jede Szene und jeder Klang im Film entstand mit Code.
Auf einem einzigen Raster gezeichnet.
Jedes Icon entsteht auf demselben Raster von 24 mal 24, mit 2 px Innenabstand, 2 px Strichstärke und runden Verbindungen. Gemeinsame Hilfslinien bringen Kreise, Quadrate und hohe Formen auf dieselbe optische Größe, sodass zwei beliebige Icons zusammenpassen wie Buchstaben einer Schrift.
- Raster 24 x 24
- Innenabstand 2 px
- Strichstärke 2 px
- Runde Linienenden und Verbindungen
Ein Icon. Jede Strichstärke.
Jedes Icon wird entlang dreier Achsen gerendert: Strichstärke von 1 bis 3 mit optischem Ausgleich bei kleinen Größen, runde oder eckige Ecken sowie die Stile Kontur, Duotone und Gefüllt, erzeugt aus seinen geschlossenen Formen.
Fein abstimmen.
Bewege die Schieberegler. Jede Komponente in jedem Framework akzeptiert dieselben Props.
Alles wird zu allem.
Pfade werden normalisiert, neu abgetastet, einander zugeordnet und interpoliert, sodass sich jedes Icon in jedes andere verwandeln lässt. Von Hand abgestimmte Paare lassen die alltäglichen Übergänge bewusst gestaltet wirken.
Icons, die sich zu bewegen wissen.
Animationen, die das Icon verstehen: draw zeichnet die Striche nacheinander nach, shake schwingt von oben wie eine Glocke. Löse sie bei mount, hover, click oder über eine state-Prop aus. Reduzierte Bewegung wird immer berücksichtigt.
Sieben Zustände. Ein Takt.
Jeder lebendige Zustand folgt derselben Uhr, sodass sich eine ganze Oberfläche im Gleichtakt bewegen kann. Scrolle, um die Spuren hereinzuholen. Das Studio exportiert dieselben Einzelbilder als GIF und WebM.
Badges, die sich ihren Platz selbst freischneiden.
Füge plus, check, alert, lock, clock, sync und mehr in einer beliebigen Ecke hinzu. Das Icon darunter wird um das Badge herum beschnitten, sodass einige Hundert Icons Tausende saubere Kombinationen ergeben.
Modifikatoren ausprobieren
Zwei Icons. Eine neue Glyphe.
Verschmilz 2 bis 10 Icons mit sieben Layouts. Die Teile werden skaliert und am Raster ausgerichtet, und wo sie sich überlappen, wird das hintere um das vordere herum beschnitten. So kollidieren Linien nie, und das Ergebnis besteht weiterhin die Lint-Prüfung.
Neue Icons, schon im Set enthalten.
Kunst, gezeichnet mit den Icons.
Jede Illustration auf dieser Seite entsteht aus der Geometrie der Icons selbst: dieselben Pfade, dasselbe Raster und derselbe Strich.
Dieselben Props. Jeder Stack.
Tree-Shaking-fähige Komponenten, ein Custom Element, das mit einem einzigen Script-Tag funktioniert, ein Tailwind-Plugin für v3 und v4 und eine CLI, die nur die Icons erzeugt, die du brauchst.