Des icônes qui bougent, se transforment et fusionnent.
Des icônes originales sur une grille de 24 : épaisseur, angles et style variables, moteur de morphing, fusion, badges modificateurs et états animés. Les mêmes props dans React, Vue, Svelte, Angular, les composants web, Tailwind et la CLI.
- icônes
- 0
- axes
- 3
- dispositions de fusion
- 7
- modificateurs
- 11
- états animés
- 7
glyphfox 1.0 en deux minutes et demie.
Chaque icône, chaque scène et chaque son du film ont été faits avec du code.
Tout est dessiné sur une seule grille.
Chaque icône est construite sur la même grille de 24 sur 24, avec une marge de 2 px, un trait de 2 px et des jointures arrondies. Des lignes de construction communes ramènent cercles, carrés et formes hautes à une même taille optique : deux icônes, quelles qu'elles soient, s'accordent comme les lettres d'une même police.
- Grille de 24 x 24
- Marge de 2 px
- Trait de 2 px
- Extrémités et jointures arrondies
Une icône. Toutes les épaisseurs.
Chaque icône se décline sur trois axes : une épaisseur de 1 à 3, avec compensation optique aux petites tailles, des angles arrondis ou vifs, et un style contour, duotone ou plein, généré à partir de ses formes fermées.
Réglez au millimètre.
Faites glisser les curseurs. Chaque composant, dans chaque framework, accepte les mêmes props.
Tout se transforme.
Les tracés sont normalisés, rééchantillonnés, appariés et interpolés : n'importe quelle icône se transforme en n'importe quelle autre. Les paires les plus courantes sont réglées à la main, pour un rendu vraiment soigné.
Des icônes qui savent bouger.
Des préréglages qui comprennent l'icône : draw trace les traits dans l'ordre, shake la balance depuis le haut, comme une cloche. Déclenchez-les sur mount, hover, click ou state. La réduction des animations est toujours respectée.
Sept états. Un même tempo.
Chaque état animé suit la même horloge, si bien qu'une interface entière peut bouger en cadence. Faites défiler pour faire entrer les pistes. Le studio exporte les mêmes images en GIF et en WebM.
Des badges qui se taillent leur place.
Ajoutez un plus, une coche, une alerte, un cadenas, une horloge, une synchro et bien d'autres, dans n'importe quel coin. L'icône en dessous est découpée autour du badge : quelques centaines d'icônes donnent ainsi des milliers de combinaisons nettes.
Bac à sable des modificateurs
Deux icônes. Un nouveau glyphe.
Fusionnez de 2 à 10 icônes avec sept dispositions. Les éléments sont mis à l'échelle et calés sur la grille, et là où ils se chevauchent, celui de derrière est découpé autour de celui de devant : les traits ne se télescopent jamais et le résultat passe toujours le lint.
De nouvelles icônes, déjà incluses.
De l'art dessiné avec les icônes.
Chaque illustration de cette page est construite à partir de la géométrie même des icônes : les mêmes tracés, la même grille et le même trait.
Mêmes props. Toutes les stacks.
Des composants compatibles tree shaking, un élément personnalisé qui fonctionne avec une simple balise script, un plugin Tailwind pour v3 et v4, et une CLI qui ne génère que les icônes dont vous avez besoin.