Esta galería de iconos de CSS puro es lo que todos los desarrolladores de Frontend desean

El diseñador de Adobe Wenting Zhang creó una aplicación web interesante para generando iconos CSS puros. Es simplemente llamado “Icono CSS” y puede ser uno de los mejores generadores de iconos para desarrolladores frontend.

Este proyecto es completamente libre y de código abierto en GitHub así que puedes descargar y desordenar con cualquiera de los códigos.

Estos iconos no tiene ninguna dependencia CSS o necesita alguna característica especial del navegador. A primera vista, puede parecer que los íconos están construidos en SVG pero en realidad son solo divs.

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

Puedes elegir entre iconos de línea delgada o iconos rellenos oscuros. Ambos utilizan propiedades CSS similares e incluso puede ver qué son haciendo clic en cualquier icono de la lista. Verás un barra lateral deslizante Con el código HTML y CSS junto con el icono ampliado..

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

A cambia el color de cualquier icono, solo encuentra el color propiedad en la clase de icono principal. Actualizando ese color propiedad cambiará todo lo demás, también.

Dado que estos iconos son bastante simple, Probablemente no funcionarán para todos los sitios web. Pero esto es un Buena alternativa a las imágenes o fuentes de iconos y es completamente libre.

Revisar la Página de inicio del icono CSS a ver más ejemplos y para copiar / editar la fuente. Tú también puedes prueba cada icono por separado en CodePen si quieres juega con la fuente en tu navegador.