Icons
Versión
Grid/Reticula
Para crear el layout se toma como base un grid que se construye de la siguiente manera:
Grid
Para crear el layout se toma como base un grid.
Tamaño de layout: 24px x 24px
Linea de grid: Borde 0.1px Espacio entre lineas 1px
Figuras base
Las líneas base nos ayudan a crear íconos circulares o cuadrados que cuenta con una misma dimensión y proporción en su ancho y alto.
Cuadrado: 18px x 18px, Radio de borde 2px
Circulo: 20px de diámetro
Figuras alargadas
En ocaciones los íconos pueden mostrar proporciones distintas debido a su distinto ancho y alto, para estos casos agregamos un rectángulo horizontal y otro vertical.
Rectangulo horizontal: 16px x 20px, Radio de borde 2px
Rectangulo vertical: 20px x 16px, Radio de borde 2px
Lineas y figuras adicionales
Por último se agregan líneas diagonales, horizontales y verticales además de un circulo pequeño que nos ayudarán como guías de apoyo al momento de diseñar el ícono.
Circulo pequeño: 10px de diámetro
¡A comenzar a crear!
Ya listo nuestro Icon layout solo nos resta crear excelentes íconos geométricos basado en estas líneas guías.
Txt 2
<i class="NP-icon-card"></i>
/* También puedes usar el icono directamente con css de la siguiente manera:*/
.selector:before {
content: "\e904";
}