Pack de iconos · Descarga gratuita

50 iconos de ropa de hombre gratis en SVG y PNG

27 de agosto de 2026 · Iconos · 6 min de lectura

Busca "icono de ropa" en cualquier banco gratuito y vas a toparte con la misma camiseta genérica repetida en veinte packs distintos. En cuanto necesitas distinguir un chaleco de traje de un chaleco acolchado, o un pantalón jogger de uno casual, la búsqueda se complica y terminas mezclando estilos de trazo distintos en el mismo proyecto.

Este pack resuelve eso: 50 iconos de ropa y accesorios masculinos en SVG y PNG, con variante clara y oscura, nombres en español y descarga directa sin registro. Camisas, suéteres, sudaderas, pantalones, un buen puñado de abrigos y accesorios como reloj, corbata, gafas, mochila, cinturón y sombrero de copa. Aquí te contamos qué trae, cómo descargarlo y cómo adaptarlo al color de tu marca.

Así se ven los iconos

Una muestra de 12 de los 50 iconos del pack, con el mismo trazo y el mismo tamaño de caja que nuestros packs anteriores:

Camisa
Suéter cardigan
Impermeable
Chaleco de traje
Polo
Gorro de invierno
Pantalón jogger
Gafas
Corbata
Mochila
Reloj
Shorts cargo

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

Qué incluye el pack

El archivo trae 200 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 de 512 × 512 con fondo transparente, también en las dos variantes. Los generamos a partir de los SVG ya optimizados porque el pack de origen solo traía PNG de 96 × 96, muy por debajo del estándar del sitio.
Nombres en español y en minúsculas: sudadera-con-capucha.svg, chaleco-de-traje.svg, sueter-cardigan.svg. Se buscan por lo que son, no por un código.
SVG optimizados con nuestro optimizador de SVG: el set completo pasó de 467 KB a 177 KB, un 62 % menos de peso sin perder detalle.

Qué prendas y accesorios cubren los 50 iconos

El pack cubre un guardarropa masculino completo —el calzado es la única pieza que no está incluida—:

Camisas y polos: camisa, camisa de botones, camisa de oficina, camisa henley, camisa oxford, camisa cuello v, camisas (varias juntas), polo, camiseta manga casquillo, camiseta raglan y camiseta ringer.
Suéteres, sudaderas y chalecos: tres sudaderas con capucha, suéter cardigan, suéter cuello alto, suéter cuello alto grueso, suéter cuello redondo grueso, suéter cuello v, suéter de esquí y chaleco acolchado.
Abrigos y capas exteriores: tres abrigos sencillos, impermeable, bata de baño y dos chalecos de traje.
Pantalones y shorts: dos pantalones casuales, pantalón jogger, shorts cargo, dos shorts casuales, shorts de jean y dos shorts de tenis.
Accesorios: bufanda, cinturón, dos corbatas, dos pares de gafas, gorro de invierno, mochila, cuatro relojes y sombrero de copa.

Descarga el pack

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

Descargar los 50 iconos (ZIP · 1,4 MB)

Dentro del ZIP encontrarás también un archivo LEEME.txt con el resumen del contenido. Las condiciones de uso están en el apartado Licencia y uso un poco más abajo. Si este pack te sirvió, mira también los de inteligencia artificial y realidad virtual — publicamos un set nuevo cada semana en recursos gratuitos.

Cuando el pack trae más de una versión del mismo icono

Varias prendas vienen en más de una versión: tres abrigos sencillos, dos chalecos de traje, dos corbatas, dos pares de gafas, cuatro relojes, dos pantalones casuales, dos shorts casuales, dos shorts de tenis y tres sudaderas con capucha. No es relleno: son distintos cortes y ángulos de la misma prenda, para que elijas el que mejor encaje con la composición de tu diseño en lugar de forzar el mismo dibujo en todos los contextos.

Y si tu proyecto necesita separar rápido lo de arriba de lo de abajo, los nombres ya vienen agrupados por familia: todo lo que empieza por camisa, camiseta, sueter o sudadera va en la parte superior; pantalon y shorts van en la inferior; el resto son accesorios y capas exteriores.

SVG o PNG: cuál usar en cada caso

Usa el SVG siempre que puedas. Es vectorial: se ve nítido en un icono de talla de 16 píxeles y en el encabezado de una guía de estilo, pesa unos pocos kilobytes y le puedes cambiar el color desde el propio código. El PNG es una imagen de píxeles: su color viene fijo y, aunque estos vienen en 512 × 512 —de sobra para la mayoría de usos—, ampliarlos más allá los pixela.

El PNG cubre los casos donde el SVG no entra: plantillas de correo (muchos gestores lo bloquean), catálogos de plataformas de venta que solo aceptan imágenes de trama y versiones antiguas de Office.

Cómo cambiar el color de un icono SVG

Un icono SVG de este pack es texto: puedes abrirlo con el Bloc de notas y verás un atributo fill con su color. Cambiarlo es todo lo que hace falta para que combine con tu marca, tu app o tu presentación.

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 al 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>
  Camisa
</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, úsalo como máscara. El navegador pinta el fondo y recorta la silueta:

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

La ventaja es que cambias el color de todos los iconos de tu sitio tocando una sola línea. Y si además quieres 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.
Figma: arrastra el SVG directamente al lienzo. Entra como vector editable: cambia el relleno o conviértelo en componente para tu sistema de diseño.
Tiendas online (Shopify, WooCommerce y similares): los PNG de 512 px con transparencia entran directo como icono de categoría o de guía de tallas en los editores que no aceptan SVG.
PowerPoint y Google Slides: inserta el SVG como imagen. En PowerPoint, clic derecho → Convertir en forma para recolorearlo como elemento nativo.
Tu web o app: lo más rápido es <img src="camisa.svg" alt="Camisa" width="32" height="32">. Para controlar el color, pégalo en línea con el truco de currentColor.

¿Quieres usar uno de estos iconos como favicon de tu proyecto? En la galería de favicons SVG tienes la etiqueta lista para copiar, 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 50 iconos hasta cubrir camisas, suéteres, pantalones y accesorios con un trazo y un tamaño de caja comunes, la traducción de cada nombre al español, la organización en carpetas con la variante clara y la oscura, la generación de los PNG de 512 × 512 con fondo transparente a partir de los SVG ya optimizados —el pack de origen solo traía PNG de 96 × 96— y la optimización de cada SVG con nuestro optimizador, que redujo el peso total del set un 62 %—. Eso es lo que convierte una carpeta de archivos sueltos en un pack que se puede usar.

Cómo usarlo

Uso: personal y comercial. No redistribuir el pack ni revenderlo como propio; si quieres compartirlo, enlaza el artículo en agpublicista.com. Por mi parte la descarga es directa: no pido registro, ni tu correo, ni atribución. Bájalo y úsalo tanto en un proyecto personal como en un encargo para un cliente.

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

¿Para qué proyectos sirven estos iconos de ropa de hombre?

Para cualquier producto o contenido sobre moda masculina: la landing de una tienda online, una guía de tallas, un catálogo de temporada, presentaciones de una colección, infografías de estilo o material educativo sobre vestuario. Cubren camisas, suéteres, sudaderas, pantalones, abrigos y accesorios como reloj, corbata, gafas, mochila y cinturón.

¿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 debo 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 desde el propio código. Recurre al PNG solo cuando el programa de destino no acepte SVG, como algunas plantillas de correo, catálogos de plataformas de venta o versiones antiguas de Office. Este pack trae el PNG a 512 × 512, en las dos variantes.

¿Con qué condiciones puedo usarlos?

Uso: personal y comercial. No redistribuir el pack ni revenderlo como propio; si quieres compartirlo, enlaza el artículo en agpublicista.com. La descarga no pide registro ni correo, y lo tienes explicado con más detalle en Licencia y uso, un poco más arriba en este artículo.