Pack de iconos · Descarga gratuita
50 iconos de realidad virtual gratis en SVG y PNG
Busca "icono de realidad virtual" y vas a encontrar lo mismo cuarenta veces: unas gafas VR de frente. El problema aparece cuando necesitas contar algo más preciso —un objeto colocado sobre la cámara del móvil, un holograma proyectado, un gesto reconocido en el aire— y ahí ya no hay nada.
Este pack va justo por ahí: 50 iconos de realidad virtual y aumentada en SVG y PNG, con variante clara y oscura, nombres en español y descarga directa sin registro. Visores y controles, sí, pero también cinco composiciones de AR distintas, sensores, hologramas, contenido 360 y captura de movimiento. 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:
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) ysvg/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. Un tamaño generoso que reduces sin pérdida al que necesites.
-
Nombres en español y en minúsculas:
gafas-vr.svg,recorrido-virtual.svg,ar-holograma.svg. Se buscan por lo que son, no por un código. - SVG optimizados con nuestro optimizador de SVG: un 13 % menos de peso sin perder detalle. Este set ya venía bastante limpio de fábrica, y aun así hubo margen.
Qué temas cubren los 50 iconos
El set cubre el ecosistema completo de lo inmersivo, no solo el visor:
- Visores y dispositivos: gafas VR, gafas AR, experiencia VR, control de juego, control remoto, volante, dron, cámara web, cámara 360, cámara AR.
- Realidad aumentada: cinco composiciones distintas —AR en pantalla, en el móvil, sobre un objeto, como holograma y activada con un gesto— más libro AR y microchip.
- Contenido inmersivo: video 360, panorámica, recorrido virtual, holograma, proyección 3D, cubo 3D, cine 4D, simulación, ciberespacio.
- Sensores e interacción: sensor 3D, reconocimiento facial, control de voz, inclinación, interactividad, mano robótica, escaneo, percepción de profundidad, seguimiento de movimiento, visión.
- Software y datos: software, programación, gestión de datos, internet, GPS, etiquetas, código QR, cuadrícula, decoración del hogar, científico, videollamada, auriculares, realidad virtual, pistola.
Descarga el pack
La descarga es directa, gratuita y no pide registro ni correo. El archivo es un ZIP de 2,1 MB: descomprímelo y ya tienes las carpetas listas.
Descargar los 50 iconos (ZIP · 2,1 MB)
Dentro del ZIP encontrarás también un archivo LEEME.txt con el resumen del
contenido y las condiciones de uso. Si este pack te sirvió, mira también los de
eventos virtuales y
hotelería — publicamos un set
nuevo cada semana en recursos gratuitos.
VR y AR: qué icono usar en cada caso
Es la confusión más común y el pack la resuelve por separado. La realidad virtual te mete dentro de un entorno simulado: el mundo real desaparece. Sus iconos aquí son los visores cerrados, la experiencia VR, el ciberespacio, la simulación y el recorrido virtual.
La realidad aumentada deja el mundo real donde está y le superpone
algo digital encima. Sus cinco iconos llevan el prefijo ar- y cada uno
resuelve una composición distinta: ar-pantalla (el objeto sobre un
monitor), ar-movil (proyectado desde el teléfono), ar-cubo
(el objeto en primer plano), ar-holograma (flotando sobre una base) y
ar-gesto (sostenido en la mano). Si estás diseñando una app de prueba
virtual o un catálogo con vista previa, esa distinción te ahorra explicaciones.
SVG o PNG: cuál usar en cada caso
Usa el SVG siempre que puedas. Es vectorial: se ve nítido en un botón de 16 píxeles y en la pantalla de bienvenida de tu app VR, 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), motores de juego y editores 3D que esperan texturas 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 512 512" fill="currentColor" width="24" height="24" aria-hidden="true">
<path d="…" />
</svg>
Gafas VR
</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-gafas-vr {
display: inline-block;
width: 32px;
height: 32px;
background: #35d6c8;
-webkit-mask: url("iconos/gafas-vr.svg") center / contain no-repeat;
mask: url("iconos/gafas-vr.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.
- Unity y motores de juego: los PNG de 512 px con transparencia entran directo como textura de interfaz; súbelos como Sprite y ya los tienes para los botones del menú de tu experiencia VR.
- 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="gafas-vr.svg" alt="Gafas VR" width="32" height="32">. Para controlar el color, pégalo en línea con el truco decurrentColor.
¿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
Puedes usar los iconos en proyectos personales y comerciales, incluidos trabajos para clientes: interfaces de apps VR, landings de producto, presentaciones sobre metaverso, material educativo, videojuegos 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 producto o contenido sobre realidad virtual y aumentada: la landing de una app VR, la interfaz de un visor, presentaciones sobre metaverso, catálogos con prueba virtual, recorridos 360 de inmuebles, videojuegos y material educativo sobre tecnología inmersiva. Cubren visores, sensores, hologramas, AR y contenido 360.
¿Cuál es la diferencia entre los iconos de VR y los de AR del pack?
Los de realidad virtual muestran visores, cascos y entornos totalmente
simulados: gafas-vr, experiencia-vr, ciberespacio,
simulacion. Los de realidad aumentada superponen elementos
digitales sobre el mundo real y llevan el prefijo ar-:
ar-pantalla, ar-movil, ar-cubo,
ar-holograma y ar-gesto, cada uno con una composición distinta.
¿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.
¿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.