Pack de iconos · Descarga gratuita
25 iconos de inteligencia artificial gratis, en 3 estilos
Los packs de iconos de IA suelen venir en un solo estilo, y adivinar cuál va a encajar con tu proyecto antes de descargarlo es una lotería. Si el plano a color no pega con tu marca, tienes que buscar otro pack completo solo para cambiar el estilo —y a menudo ni los conceptos coinciden entre uno y otro—.
Este pack resuelve eso de raíz: 25 iconos de inteligencia artificial en tres estilos —plano a color, contorno y sólido—, en SVG y PNG, con nombres en español y descarga directa sin registro. Los mismos 25 conceptos, para que elijas el estilo sin renunciar a ninguno.
Los tres estilos, lado a lado
Antes de nada, la prueba visual: el mismo robot, el mismo chatbot, la misma red neuronal y el mismo icono de voz, en los tres estilos que trae el pack.
Así se ven en contorno
Una muestra de 12 de los 25 iconos, en el estilo contorno —el que mejor lee a tamaños pequeños y el más fácil de recolorear—:
Estos 12 son solo una muestra del estilo contorno. El pack trae los 25 conceptos completos, y cada uno en sus tres estilos.
Qué incluye el pack
El archivo pesa 0,24 MB y trae 300 archivos organizados en carpetas con nombres en español:
-
25 iconos en SVG, en tres estilos:
svg/plano(a todo color, con su propia paleta ya definida),svg/contornoysvg/solido(de un solo color, listos para recolorear concurrentColor). - Los mismos 25 iconos en PNG a 128 píxeles, también en los tres estilos.
-
Nombres en español y en minúsculas:
red-neuronal.svg,chatbot.svg,vision-por-computadora.svg. Se buscan por lo que son, no por un código. - SVG optimizados: pasamos cada archivo por nuestro optimizador de SVG y el conjunto bajó un 15 % de peso. Menos que otros packs porque estos SVG ya llegaban bastante limpios —la cifra real de este pack, no la reciclamos de otro—.
Qué temas cubren los 25 iconos
El set cubre desde el concepto más general hasta la aplicación concreta:
- Conceptos centrales: algoritmo, ética de IA, modelo de IA, modelo predictivo, grafo de conocimiento, big data.
- Aprendizaje y datos: aprendizaje automático, aprendizaje profundo, análisis de datos, minería de datos, visualización de datos.
- Percepción: visión por computadora, reconocimiento de imágenes, reconocimiento de voz, lenguaje natural.
- Agentes e interacción: chatbot, asistente inteligente, robot, interfaz de usuario, red neuronal.
- Aplicaciones: automatización, conducción autónoma, computación en la nube, realidad aumentada, realidad virtual.
Descarga el pack
La descarga es directa, gratuita y no pide registro ni correo. El archivo es un ZIP de 0,24 MB: descomprímelo y ya tienes las carpetas listas.
Descargar los 25 iconos (ZIP · 0,24 MB)
Dentro del ZIP encontrarás también un archivo LEEME.txt con
un resumen del contenido. Las condiciones de uso están en el apartado
Licencia y uso un poco más abajo. Si el pack te sirve,
mira también los iconos
de realidad virtual y el resto de recursos gratuitos.
Qué estilo elegir según el proyecto
Los tres comparten los mismos 25 conceptos, así que la elección es solo de estética y de dónde va a vivir el icono:
- Plano (a color): el más vistoso. Encaja bien como protagonista —la cabecera de una landing, una tarjeta de producto, una presentación— donde el icono es el centro de atención y no necesita fundirse con el texto de alrededor.
- Contorno: el más discreto. Combina con casi cualquier tipografía y se recolorea con una línea de CSS, así que es la opción por defecto para listas, menús y interfaces.
- Sólido: el que mejor lee a tamaños pequeños —un favicon, un icono de pestaña, una notificación—, donde el contorno fino del estilo anterior se pierde.
Cómo cambiar el color de contorno y sólido
Aquí está el verdadero superpoder del formato, válido para los estilos contorno y sólido —plano trae su paleta ya definida y se edita distinto, lo vemos después—. Un icono SVG de estos dos estilos es texto sin relleno: por defecto se pinta en negro, y cambiarlo es tan fácil como añadir un atributo.
1. Que el icono herede el color del texto
El truco más práctico para una web. Añade
fill="currentColor" a la etiqueta <svg> y pégalo
en línea dentro de tu HTML: el icono adopta automáticamente el color del
texto que lo rodea, incluso al cambiar de tema claro a oscuro. Es exactamente lo que
hace la muestra de arriba:
<p style="color: #8b7bff">
<svg viewBox="0 0 64 64" fill="currentColor" width="24" height="24" aria-hidden="true">
<path d="…" />
</svg>
Red neuronal
</p>2. Colorear desde el CSS, sin tocar el archivo
Si prefieres dejar el SVG como archivo suelto y controlar el color desde la hoja de estilos, úsalo como máscara. El navegador pinta el fondo y recorta la silueta:
.icono-robot {
display: inline-block;
width: 32px;
height: 32px;
background: #35d6c8;
-webkit-mask: url("iconos/robot.svg") center / contain no-repeat;
mask: url("iconos/robot.svg") center / contain no-repeat;
}3. Recolorear el estilo plano
El estilo plano no responde a currentColor porque cada forma trae su
propio relleno definido (blancos, violetas, ámbares…). Para cambiarlo,
abre el SVG con un editor de texto y sustituye los valores hexadecimales del bloque
<style> al principio del archivo. Si vas a incrustar varios iconos
planos en la misma página, hazlo como <img> en vez de en
línea: así cada uno conserva sus propios colores sin que sus clases
internas choquen entre sí.
Consejo: antes de subir iconos a tu web, pásalos por un optimizador. Los SVG de este pack ya vienen limpios, pero si mezclas iconos de otras fuentes, el optimizador de Lienzo les quita metadatos invisibles que suelen ocupar más que el dibujo.
Cómo usarlos en tus programas
- Canva: Elementos → Subir → arrastra los SVG. Una vez en el lienzo, selecciona el icono y usa el selector de color de la barra superior (contorno y sólido responden; plano conserva su paleta).
- Figma: arrastra el SVG directamente al lienzo. Entra como vector editable, así que puedes cambiar el relleno, el grosor o convertirlo en componente para reutilizarlo en todo tu sistema de diseño.
- Illustrator: Archivo → Abrir. Verás las formas listas para editar, combinar o exportar en el formato que necesites.
-
Tu web: lo más rápido es
<img src="robot.svg" alt="Robot" width="32" height="32">. Si además quieres controlar el color de contorno o sólido, pégalo en línea con el truco decurrentColorde arriba.
¿Necesitas convertir uno de estos iconos en el favicon de tu proyecto? En la galería de favicons SVG tienes la etiqueta lista para copiar y pegar, y en la guía para crear un favicon SVG explicamos cómo hacer que se adapte al modo oscuro del navegador.
Licencia y uso
Sobre este pack
Conviene decir con claridad qué parte de este pack es trabajo mío. Los
dibujos no lo son: no reivindico su autoría ni la presento como propia. Lo
mío es todo lo que hay alrededor —la selección de los 25 conceptos
hasta dejar un conjunto coherente en los tres estilos, la traducción de cada
nombre al español, la organización en plano,
contorno y solido, la generación de la comparación
visual de estilos y la optimización de cada SVG antes de empaquetarlo—. Eso
es lo que convierte una carpeta de archivos sueltos en un pack que se puede usar.
Cómo usarlo
Por mi parte la descarga es directa: no pido registro, ni correo, ni atribución. Lo que exija la licencia de cada archivo lo fija su autor, no yo. Si el pack te sirve y quieres compartirlo, enlaza este artículo en lugar de subir el ZIP a otro sitio: así quien lo reciba tendrá siempre la versión actualizada.
Y una advertencia que prefiero dar antes que callar: las condiciones de uso de cada archivo las fija quien lo creó, no yo, y no puedo conceder derechos en nombre de terceros. Antes de que un icono acabe en un encargo comercial —la interfaz de un cliente, un producto que vendes, el logotipo de una marca—, comprueba que las condiciones de ese archivo concreto encajan con ese uso. Es un minuto de revisión y evita el disgusto.
Si crees que algo no debería estar aquí
Si eres el autor de alguno de estos iconos, o representas a quien lo es, y no quieres que se distribuya desde aquí, escríbeme a agpublicista2021@gmail.com indicando este artículo y el archivo concreto. Retiro el enlace mientras reviso el caso, en un plazo de 48 a 72 horas: primero se retira, después hablamos si hace falta. El procedimiento completo está en el aviso legal.
Preguntas frecuentes
¿Por qué el pack trae tres estilos y no uno solo?
Porque el estilo que mejor funciona depende del proyecto: el plano a color da personalidad propia a una landing o una app; el contorno es más discreto y combina con casi cualquier tipografía; el sólido lee mejor a tamaños pequeños, como un favicon o un icono de pestaña. En vez de obligarte a elegir un pack por estilo, aquí van los tres con los mismos 25 conceptos.
¿Los tres estilos se recolorean igual?
No, y conviene saberlo antes de usarlos. Contorno y sólido son de un solo color: sustituye el relleno por currentColor y el icono adopta el color del texto que lo rodea, igual que en el resto de nuestros packs. Plano trae su propia paleta ya definida —blancos, violetas, ámbares— pensada para verse bien tal cual, así que no se recolorea con ese mismo truco; si quieres tocarle el color, edita los valores de relleno directamente en el archivo.
¿Qué diferencia hay entre el SVG y el PNG?
Usa el SVG siempre que puedas: es vectorial, se ve nítido a cualquier tamaño, pesa muy poco y —en contorno y sólido— puedes cambiarle el color. Recurre al PNG solo cuando el programa de destino no acepte SVG, como ocurre en algunas plantillas de correo o versiones antiguas de Office. Este pack trae el PNG a 128 px, en los tres estilos.
¿Con qué condiciones puedo usarlos?
Descargarlos y probarlos es libre: no pido registro, ni correo, ni atribución. Lo que no puedo hacer es fijar las condiciones de unos dibujos que no son míos, porque eso lo decide quien los creó. Así que, antes de que un icono acabe en un encargo comercial, comprueba las condiciones de ese archivo concreto. Lo explico entero en «Licencia y uso», más abajo en este artículo.