Esta galería de iconos de CSS puro es lo que todos los desarrolladores frontend quieren

El diseñador de Adobe Wenting Zhang creó una aplicación web interesante para generar íconos de CSS puro . Simplemente se llama "Icono de CSS" y puede ser uno de los generadores de iconos más geniales para desarrolladores frontend.

Este proyecto es completamente gratuito y de código abierto en GitHub, por lo que puedes descargarlo y mezclarlo con cualquiera de los códigos.

Estos íconos no tienen ninguna dependencia de CSS o necesitan funciones especiales del navegador. A primera vista, puede parecer que los iconos están basados ​​en SVG, pero en realidad son solo divs .

A través de la magia de CSS, puede crear iconos de líneas personalizados para elementos comunes de la interfaz, como el menú de hamburguesas, el ícono de tres puntos o el ícono de impresión (entre muchos otros).

Puede elegir entre iconos de línea delgada o iconos llenos de oscuridad . Ambos utilizan propiedades similares de CSS e incluso puede ver lo que son haciendo clic en cualquier icono de la lista. Verá una barra lateral deslizante con el código HTML y CSS junto con el icono ampliado.

Si miras hacia la esquina superior derecha de los campos de código, verás un pequeño ícono de copia . Haga clic en eso para copiar automáticamente el código a su portapapeles. Ah, y ese icono de copia? También construido con el código CSS puro de Wenting.

Para cambiar el color de cualquier icono, simplemente encuentre la propiedad de color en la clase de icono principal. Actualizar esa propiedad de un color también cambiará todo lo demás.

Dado que estos iconos son bastante simples, probablemente no funcionen para todos los sitios web. Pero esta es una alternativa genial a las fuentes de imágenes o íconos y es completamente gratis .

Consulte la página de inicio del icono de CSS para ver más ejemplos y para copiar / editar la fuente . También puede probar cada icono por separado en CodePen si quiere juguetear con la fuente en su navegador.