Pack de iconos · Descarga gratuita

50 iconos de cocina gratis en SVG y PNG

19 agosto 2026 · Iconos · 7 min de lectura

Buscar iconos de cocina decentes es más difícil de lo que parece. Los encuentras sueltos, con estilos que no combinan entre sí, con nombres en inglés imposibles de recordar o atados a una suscripción mensual. Y cuando por fin das con un set completo, resulta que solo viene en PNG a un tamaño fijo.

Este pack resuelve las cuatro cosas de una vez: 50 iconos de cocina en SVG y PNG, con variante clara y oscura, nombres en español y descarga directa sin registro. Aquí te contamos qué trae, cómo descargarlo y —lo más útil— cómo adaptarlos al color de tu marca en un par de minutos.

Así se ven los iconos

Una muestra de 12 de los 50 iconos del pack. Todos comparten el mismo trazo fino y el mismo tamaño de caja, así que se ven coherentes al ponerlos juntos:

• Gorro de chef
• Olla
• Sartén
• Cubiertos
• Tetera
• Rallador
• Balanza
• Taza medidora
• Parrilla
• Pan fresco
• Recetario
• Tabla de cortar

Los iconos de arriba siguen el tema de esta página: si cambias entre modo claro y oscuro con el botón del menú, verás las dos variantes que incluye el pack.

Qué incluye el pack

El archivo pesa menos de medio megabyte y trae 400 archivos organizados en carpetas con nombres en español:

• 50 iconos en SVG, en dos variantes: svg/claro (trazo en tinta oscura, para fondos claros) y svg/oscuro (trazo en blanco, para fondos oscuros y modo noche).
• Los mismos 50 iconos en PNG a 24, 48 y 96 píxeles, también en las dos variantes, con versiones @2x y @4x para pantallas retina.
• Nombres en español y en minúsculas: olla-a-presion.svg, taza-medidora.svg, gorro-de-chef.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 54 % de peso sin perder un solo detalle del dibujo.

Qué temas cubren los 50 iconos

El set está pensado para cubrir una carta, una app de recetas o un blog gastronómico completo:

• Utensilios: ollas, sartenes, cucharón, espátulas, colador, rallador, cuchilla, tabla de cortar, mazo ablandador.
• Medición y preparación: balanza, taza medidora, bol para mezclar, bol con batidor, masa, ingredientes.
• Cocción: olla a presión, olla de cocción lenta, parrilla, llama, sartén de hierro, tiempo de cocción.
• Servicio y sala: menú, recetario, vajilla, cubiertos, puesto de mesa, mesero, bebida, tetera.
• Personas y detalles: chef, gorro de chef, delantal, manoplas, sal y pimienta, pan fresco, salami, sopa.

Descarga el pack

La descarga es directa, gratuita y no pide registro ni correo. El archivo es un ZIP de 0,45 MB: descomprímelo y ya tienes las carpetas listas.

Descargar los 50 iconos (ZIP · 0,45 MB)

Dentro del ZIP encontrarás también un archivo LEEME.txt con un resumen del contenido y las condiciones de uso. Si el pack te sirve, guarda esta página: iremos publicando un set nuevo cada semana en la sección de recursos gratuitos.

SVG o PNG: cuál usar en cada caso

La duda aparece siempre, así que vamos al grano. Usa el SVG siempre que puedas. Es vectorial: se ve nítido en un botón de 16 píxeles y en una valla publicitaria, pesa unos pocos kilobytes y le puedes cambiar el color desde el propio código. El PNG es una imagen de píxeles: se pixela si lo agrandas y su color viene fijo.

Entonces, ¿para qué incluimos los PNG? Para los casos donde el SVG no entra: plantillas de correo electrónico (muchos gestores lo bloquean), algunos marketplaces, versiones antiguas de PowerPoint y ciertas apps móviles. Ahí, tira del PNG del tamaño más cercano al que necesitas —nunca de uno más pequeño ampliado—.

Cómo cambiar el color de un icono SVG

Aquí está el verdadero superpoder del formato. Un icono SVG de este pack es texto: puedes abrirlo con el Bloc de notas y verás algo así como fill:#050000. Ese valor es el color del dibujo, y cambiarlo es todo lo que hace falta.

1. Cambiar el color a mano

Abre el archivo con cualquier editor de texto, busca el valor hexadecimal del fill y sustitúyelo por el color de tu marca. Guarda y listo. Si no sabes qué color usar, nuestro generador de paletas te da armonías completas con su código hexadecimal y la comprobación de contraste.

2. Que el icono herede el color del texto

El truco más práctico para una web. Si sustituyes el color por la palabra clave currentColor y pegas el SVG 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 del principio de este artículo:

<p style="color: #8b7bff">
  <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24" aria-hidden="true">
    <path d="…" />
  </svg>
  Olla a presión
</p>

3. 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, usa el icono como máscara. El navegador pinta el fondo y recorta la silueta:

.icono-olla {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #35d6c8;
  -webkit-mask: url("iconos/olla-01.svg") center / contain no-repeat;
  mask: url("iconos/olla-01.svg") center / contain no-repeat;
}

La ventaja es que cambias el color de todos los iconos de tu web tocando una sola línea. Y si quieres ir más allá con degradados, sombras o filtros sobre esos iconos, en Código web tienes generadores visuales que te dan el CSS hecho.

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 para adaptarlo a tu diseño.
• 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.
• PowerPoint y Google Slides: inserta el SVG como imagen. En PowerPoint, con clic derecho → Convertir en forma podrás recolorearlo como cualquier elemento nativo.
• Tu web: lo más rápido es <img src="olla-01.svg" alt="Olla" width="32" height="32">. Si además quieres controlar el color, pégalo en línea con el truco de currentColor que vimos 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

Puedes usar los iconos en proyectos personales y comerciales, incluidos trabajos para clientes: cartas de restaurante, apps de recetas, webs de gastronomía, presentaciones o publicaciones en redes. Puedes modificarlos y recolorearlos con total libertad.

Lo que no está permitido es revender el pack ni redistribuirlo como si fuera propio, ni ofrecerlo como descarga en otro sitio. Si quieres compartirlo con alguien, enlaza este artículo: así siempre tendrá la versión actualizada.

Preguntas frecuentes

¿Cómo cambio el color de un icono SVG?

Abre el archivo con un editor de texto y sustituye el valor de fill por tu color. Si lo reemplazas por currentColor y pegas el SVG en línea en tu HTML, el icono tomará automáticamente el color del texto que lo rodea. En Figma, Illustrator o Canva basta con seleccionarlo y aplicar un relleno nuevo.

¿Cuándo conviene usar el SVG y cuándo el PNG?

Usa el SVG siempre que puedas: es vectorial, se ve nítido a cualquier tamaño, pesa muy poco y puedes cambiarle el color. Recurre al PNG solo cuando el programa de destino no acepte SVG, como ocurre en algunas plantillas de correo, ciertos marketplaces o versiones antiguas de Office.

¿Qué diferencia hay entre la variante clara y la oscura?

La variante clara tiene el trazo en tinta oscura y está pensada para fondos claros. La oscura lo tiene en blanco, para fondos oscuros o modo noche. El pack incluye los 50 iconos en ambas versiones, así que no necesitas editar nada para adaptarlos.

¿Puedo usar los iconos en proyectos de clientes?

Sí, puedes usarlos en proyectos personales y comerciales, incluidos trabajos para clientes. Lo que no está permitido es revender el pack ni redistribuirlo como si fuera propio; para compartirlo, enlaza este artículo.