Pack de iconos · Descarga gratuita

50 iconos de hotelería gratis en SVG y PNG

19 agosto 2026 · Iconos · 6 min de lectura

Si trabajas en la web de un hotel, una app de reservas o el material de un spa, seguro te topaste con el mismo problema: los iconos de hotelería que encuentras gratis son genéricos, no combinan entre sí, o directamente no existen para lo que necesitas —¿cuándo fue la última vez que viste un buen icono de "carrito de servicio a la habitación"?—.

Este pack cubre todo el recorrido del huésped: 50 iconos de hotelería en SVG y PNG, con variante clara y oscura, nombres en español y descarga directa sin registro. Desde el check-in hasta el spa, pasando por la recepción, las habitaciones y el restaurante. 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 fino y el mismo tamaño de caja que ya viste en nuestros packs anteriores:

• Hotel
• Recepción
• Llaves de habitación
• Cama
• Spa
• Restaurante
• Taxi
• WiFi
• Servicio 24/7
• Conserje
• Botones
• Pasaporte

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 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: recepcion-01.svg, llaves-de-habitacion.svg, servicio-24-7.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 52 % de peso sin perder detalle del dibujo.

Qué temas cubren los 50 iconos

El set sigue el recorrido completo de un huésped, de la llegada a la salida:

• Llegada y recepción: recepción, timbre de recepción, llaves de habitación, botones, conserje, pasaporte, carritos de equipaje y portaequipaje.
• Habitación: camas, almohadas, TV, plancha, toalla, ducha, bañera, cartel de "no molestar" en sus dos versiones.
• Servicios y bienestar: spa, masajista, sandalias, tumbona, servicio a la habitación y su carrito, servicio 24/7, WiFi.
• Restaurante y bar: restaurante, mesero, barra de bebidas, champán, hora del café, hora del té, taza de té, barista.
• El hotel como marca: tres variantes de edificio, letrero de hotel, certificado de excelencia, empleados de hotel, taxi.

Descarga el pack

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

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

Dentro del ZIP encontrarás también un archivo LEEME.txt con un resumen del contenido y las condiciones de uso. Si te sirvió este pack, quizás también te interese el de 50 iconos de cocina —ideal si tu hotel tiene restaurante propio— y seguiremos publicando un set nuevo cada semana en recursos gratuitos.

SVG o PNG: cuál usar en cada caso

Usa el SVG siempre que puedas. Es vectorial: se ve nítido en un ícono de 16 píxeles en tu barra de navegación y en un cartel impreso de recepción, 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.

El PNG cubre los casos donde el SVG no entra: plantillas de correo para confirmar reservas (muchos gestores lo bloquean), algunos sistemas de gestión hotelera y versiones antiguas de PowerPoint. Ahí, usa el PNG del tamaño más cercano al que necesitas —nunca uno más pequeño ampliado—.

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 algo como fill:#050000. Ese valor es el color del dibujo, y cambiarlo es todo lo que hace falta para que combine con los colores de tu marca u hotel.

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

.icono-recepcion {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #35d6c8;
  -webkit-mask: url("iconos/recepcion-01.svg") center / contain no-repeat;
  mask: url("iconos/recepcion-01.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 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 o app de reservas: lo más rápido es <img src="recepcion-01.svg" alt="Recepción" 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: webs de hoteles y hostales, apps de reservas, señalética digital, 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

¿Para qué proyectos sirven estos iconos?

Para cualquier proyecto de alojamiento o turismo: la web de un hotel, hostal o Airbnb, una app de reservas, un menú de servicios de spa, señalética digital de recepción o material de marketing para agencias de viaje. Cubren desde el check-in hasta el room service.

¿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 en algunas plantillas de correo o versiones antiguas de Office.

¿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.