Un icono puede ayudar a encontrar una acción o reconocer una sección. Para que el conjunto se vea coherente, elige una familia de iconos SVG y úsala con tamaños y trazos consistentes. Estas seis bibliotecas ofrecen opciones gratuitas con sus licencias de origen.
Seis bibliotecas para construir un conjunto.
Lucide
Líneas limpias
Una buena base para interfaces de servicios con un trazo ligero y consistente.
Licencia: ISC; consulta la licencia completa y las notas de procedencia.
Heroicons
Interfaces compactas
Útil para botones, navegación y acciones que necesitan una familia visual clara.
Licencia: MIT; conserva los avisos que exige la licencia al distribuir el material.
Tabler Icons
Un catálogo amplio
Explora sus categorías si tu proyecto combina funciones de negocio y de interfaz.
Licencia: MIT; revisa los archivos y avisos incluidos en la distribución.
Phosphor
Distintos pesos
Permite buscar una presencia más ligera o más contundente dentro de una misma familia.
Licencia: MIT; comprueba la licencia de los archivos que incorpores.
Material Symbols
Una familia flexible
Una opción para interfaces que requieren muchos símbolos y una lógica visual común.
Licencia: Apache 2.0; consulta los requisitos y avisos de la distribución.
Bootstrap Icons
Símbolos para la interfaz
Puedes emplear su biblioteca de SVG sin construir todo el sitio con Bootstrap.
Licencia: MIT; conserva los avisos correspondientes a los archivos utilizados.
Cómo llevar los iconos a tu diseño.
- Prepara una lista corta.
Empieza por las acciones reales: buscar, contactar, descargar o añadir al carrito. Elige símbolos que el visitante pueda reconocer en su contexto.
- Mantén una familia visual.
Comprueba grosor del trazo, tamaño aparente y alineación. Mezclar un icono muy detallado con otro mínimo puede restar claridad.
- Acompaña las acciones importantes.
Un texto como «Descargar plantilla» explica más que una flecha sola. Si usas un botón solo con icono, proporciona un nombre accesible y una zona de pulsación suficiente.
Antes de seguir, resolvamos esto.
¿Los iconos SVG se pueden cambiar de color?
Normalmente puedes adaptar su relleno o trazo, respetando su licencia. Si el SVG usa currentColor, puede heredar el color del texto del componente.
¿Puedo usar estas bibliotecas sin atribución visible?
Revisa la licencia de cada biblioteca. Que no exija un crédito visible junto al icono no significa que puedas eliminar avisos de licencia de una distribución.
¿Un icono puede sustituir todas las etiquetas?
Conviene conservar texto en acciones que puedan resultar ambiguas. En botones solo con icono, el nombre accesible y el contexto siguen siendo necesarios.
