Buscar y descargar iconos gratis
Busca entre más de 15,000 iconos de código abierto de Lucide, Tabler Icons y Material Symbols de Google en un solo lugar. Elige un icono, ajusta su color, tamaño y grosor de trazo, y descarga un SVG limpio o un PNG, o copia el SVG, el JSX o la data URI.
Última actualización:
Cargando iconos…
Cómo usar Buscar y descargar iconos gratis
- Busca un icono escribiendo una palabra en inglés, como home, arrow o cart, o toca una búsqueda popular.
- Filtra por conjunto si quieres un estilo coherente: Lucide y Tabler son iconos de contorno limpios, y Material Symbols son los estilos relleno, contorno, redondeado y afilado de Google.
- Haz clic en un icono para abrirlo en el panel y ajustar su color, tamaño y grosor de trazo.
- Descarga SVG para webs, apps e impresión, o descarga PNG para presentaciones, documentos y apps de chat.
- Copia el código si desarrollas: marcado SVG, un componente JSX para React o una data URI para CSS.
Comparación de los tres conjuntos de iconos
| Conjunto | Estilo | Cuadrícula | Licencia | Ideal para |
|---|---|---|---|---|
| Lucide | Contorno, extremos de línea redondeados | 24 × 24, trazo 2 | ISC | Apps web, paneles, un aspecto moderno y amigable |
| Tabler Icons | Contorno (y algunas variantes rellenas) | 24 × 24, trazo 2 | MIT | Interfaces grandes que necesitan muchos iconos a juego |
| Material Symbols | Relleno, contorno, redondeado y afilado | 24 × 24 | Apache 2.0 | Apps de estilo Android e interfaces similares a las de Google |
Cada tarjeta de icono muestra un pequeño punto de color según su conjunto. Para un aspecto coherente, usa iconos de un solo conjunto en todo el proyecto, con el mismo grosor de trazo.
Consejos para usar bien los iconos
- Ajusta el tamaño a la cuadrícula. Estos iconos están diseñados sobre una cuadrícula de 24 píxeles, así que se ven más nítidos a 24, 48 o 96 px. A 16 px, elige formas sencillas.
- Mantén trazos coherentes. Si amplías mucho los iconos de contorno, reduce el grosor del trazo para que las líneas no se vean pesadas; si los reduces, auméntalo ligeramente.
- Añade etiquetas accesibles. Un botón que solo tiene un icono necesita un
aria-label. Un icono puramente decorativo debe llevararia-hidden="true". - Comprueba el contraste. Los iconos que transmiten significado deben tener una relación de contraste de al menos 3:1 con el fondo.
- Usa SVG en línea para los temas. Pega el código SVG en tu HTML y cambia el color por
currentColorpara que el icono siga el color de tu texto, incluido el modo oscuro.
Preguntas frecuentes
¿Estos iconos son gratis para uso comercial?
Sí. Lucide se publica bajo la licencia ISC, Tabler Icons bajo la licencia MIT y Material Symbols bajo la licencia Apache 2.0. Las tres permiten el uso gratuito en proyectos personales y comerciales, incluida su modificación. No se requiere atribución en tu producto, aunque las licencias MIT e ISC piden conservar el texto de la licencia si redistribuyes el propio conjunto de iconos.
¿De dónde vienen los iconos?
Los resultados de búsqueda y las formas de los iconos provienen de la API pública de Iconify, un servicio de código abierto que aloja estos conjuntos de iconos. Solo se le envía tu palabra de búsqueda. El cambio de color, el redimensionado y la conversión a PNG se hacen en tu navegador.
¿Debo descargar SVG o PNG?
Elige SVG para webs, apps, logotipos e impresión: es un archivo vectorial diminuto que se mantiene nítido a cualquier tamaño y se puede modificar con CSS. Elige PNG cuando el programa que usas no acepte SVG, como algunas apps de presentaciones, chat o documentos. Elige un tamaño de PNG al menos tan grande como el que se mostrará.
¿Cómo cambio el color del icono?
Usa el cuadro de color o escribe un código HEX. El color se escribe directamente en el SVG y el PNG descargados. Si copias el código SVG y prefieres darle estilo con CSS, sustituye el valor del color por currentColor y define la propiedad color en el elemento padre.
¿Qué hace el ajuste de grosor de trazo?
Los iconos de Lucide y Tabler se dibujan con líneas (trazos) de 2 unidades de grosor en una cuadrícula de 24 unidades. Bajar el valor da un aspecto más ligero y fino, y subirlo da un aspecto más grueso. Material Symbols son formas rellenas, así que el ajuste no se aplica a ellos.
¿Por qué mi búsqueda no encuentra nada?
Los nombres y etiquetas de los iconos están en inglés y suelen usar sustantivos simples, como trash en lugar de delete bin. Prueba una palabra más corta o más general, o vuelve a poner el filtro de conjunto en Todos los conjuntos. Si aparece un mensaje de error, no se pudo conectar con el servicio de iconos; revisa tu conexión y pulsa Reintentar.
¿Puedo usar el código JSX en React?
Sí. Copiar JSX te da un pequeño componente de función con los atributos SVG convertidos a camelCase (strokeWidth, strokeLinecap, etc.) y las props propagadas al elemento svg, para que puedas pasar className, width o atributos aria.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.