Iconos que se mueven, se transforman y se fusionan.
Iconos originales en una cuadrícula de 24 con grosor, esquinas y estilo variables, un motor de morph, fusión, insignias modificadoras y estados vivos. Las mismas props en React, Vue, Svelte, Angular, componentes web, Tailwind y la CLI.
- iconos
- 0
- ejes
- 3
- layouts de fusión
- 7
- modificadores
- 11
- estados vivos
- 7
glyphfox 1.0 en dos minutos y medio.
Cada icono, escena y sonido de la película se hizo con código.
Todo dibujado en una sola cuadrícula.
Cada icono se construye sobre la misma cuadrícula de 24 por 24, con 2 px de margen, un trazo de 2 px y uniones redondeadas. Unas líneas guía compartidas mantienen círculos, cuadrados y formas altas en un mismo tamaño óptico, así que dos iconos cualesquiera encajan como las letras de una misma fuente.
- Cuadrícula de 24 x 24
- Margen de 2 px
- Trazo de 2 px
- Remates y uniones redondeados
Un icono. Todos los grosores.
Cada icono se renderiza en tres ejes: grosor de 1 a 3 con compensación óptica en tamaños pequeños, esquinas redondeadas o rectas, y estilo contorno, duotono o sólido, generado a partir de sus formas cerradas.
Ajústalo a tu gusto.
Arrastra los controles deslizantes. Cada componente, en cada framework, recibe las mismas props.
De cualquier forma a cualquier otra.
Los trazados se normalizan, se remuestrean, se emparejan y se interpolan, así que cualquier icono se convierte en cualquier otro. Los pares ajustados a mano hacen que los más habituales parezcan diseñados a propósito.
Iconos que saben moverse.
Animaciones predefinidas que entienden el icono: draw dibuja los trazos en orden y shake oscila desde arriba como una campana. Actívalas con mount, hover, click o una prop state. Siempre se respeta la preferencia de movimiento reducido.
Siete estados. Un mismo compás.
Todos los estados vivos siguen un único reloj, así que una interfaz entera puede moverse al compás. Desplázate para que entren las pistas. El estudio exporta los mismos fotogramas como GIF y WebM.
Insignias que abren su propio espacio.
Añade plus, check, alert, lock, clock, sync y más en cualquier esquina. El icono de debajo se recorta alrededor de la insignia, así que con unos cientos de iconos se obtienen miles de combinaciones limpias.
Prueba los modificadores
Dos iconos. Un glifo nuevo.
Fusiona de 2 a 10 iconos con siete layouts. Las partes se escalan y se ajustan a la cuadrícula y, donde se superponen, la que queda detrás se recorta alrededor de la que queda delante, así que las líneas nunca chocan y el resultado sigue pasando el lint.
Iconos nuevos, ya incluidos en el conjunto.
Arte dibujado con los iconos.
Cada ilustración de esta página está hecha con la propia geometría de los iconos: los mismos trazados, la misma cuadrícula y el mismo trazo.
Las mismas props. En cualquier stack.
Componentes compatibles con tree shaking, un elemento personalizado que funciona con una sola etiqueta script, un plugin de Tailwind para v3 y v4, y una CLI que genera solo los iconos que necesitas.