Ícones que se movem, se transformam e se fundem.
Ícones originais em uma grade de 24 com peso, cantos e estilo variáveis, um motor de morph, fusão, selos modificadores e estados vivos. As mesmas props em React, Vue, Svelte, Angular, web components, Tailwind e na CLI.
- ícones
- 0
- eixos
- 3
- layouts de fusão
- 7
- modificadores
- 11
- estados vivos
- 7
O glyphfox 1.0 em dois minutos e meio.
Cada ícone, cena e som do filme foi feito com código.
Desenhado em uma só grade.
Todo ícone nasce na mesma grade de 24 por 24, com 2 px de margem, traço de 2 px e junções redondas. Linhas guia compartilhadas mantêm círculos, quadrados e formas altas no mesmo tamanho óptico, então quaisquer dois ícones combinam como letras de uma mesma fonte.
- Grade 24 x 24
- 2 px de margem
- Traço de 2 px
- Pontas e junções redondas
Um ícone. Todos os pesos.
Cada ícone é desenhado em três eixos: peso de 1 a 3 com compensação óptica em tamanhos pequenos, cantos redondos ou retos, e estilo contorno, duotone ou sólido, gerado a partir das formas fechadas.
Ajuste do seu jeito.
Arraste os controles. Todo componente, em todo framework, recebe as mesmas props.
Qualquer um vira qualquer outro.
Os traços são normalizados, reamostrados, pareados e interpolados, então qualquer ícone vira qualquer outro. Pares ajustados à mão deixam os mais comuns com cara de design.
Ícones que sabem se mexer.
Animações que entendem o ícone: draw desenha os traços em ordem, shake balança a partir do topo como um sino. Dispare na montagem, no hover, no clique ou por uma prop de estado. Movimento reduzido é sempre respeitado.
Sete estados. Um só compasso.
Todo estado vivo segue o mesmo relógio, então uma interface inteira pode se mover no mesmo ritmo. Role para trazer as faixas. O estúdio exporta os mesmos quadros em GIF e WebM.
Selos que abrem o próprio espaço.
Adicione mais, check, alerta, cadeado, relógio, sincronizar e outros em qualquer canto. O ícone de baixo é recortado em volta do selo, então algumas centenas de ícones viram milhares de combinações limpas.
Playground de modificadores
Dois ícones. Um glifo novo.
Funda de 2 a 10 ícones com sete layouts. As partes são escaladas e alinhadas à grade e, onde se sobrepõem, a de trás é recortada em volta da da frente, então as linhas nunca colidem e o resultado continua passando no lint.
Ícones novos, prontos para usar.
Arte desenhada com os ícones.
Toda ilustração desta página é construída com a própria geometria dos ícones: os mesmos traços, a mesma grade e a mesma espessura.
Mesmas props. Qualquer stack.
Componentes com tree shaking, um custom element que funciona com uma única tag script, um plugin Tailwind para v3 e v4 e uma CLI que gera só os ícones que você usa.