Pack de iconos · Descarga gratuita
50 iconos de eventos virtuales gratis en SVG y PNG
Webinars, cursos en línea, transmisiones en vivo, reuniones remotas: buena parte del trabajo creativo de hoy pasa por una pantalla compartida. Y sin embargo, cuando necesitas un icono de videollamada que no sea el mismo de siempre —o uno de "evento virtual" que de verdad lo parezca—, la búsqueda se pone cuesta arriba.
Este pack lo resuelve: 50 iconos de eventos virtuales en SVG y PNG, con variante clara y oscura, nombres en español y descarga directa sin registro. Videollamadas, micrófonos, streaming en vivo, calendarios, participantes y todo lo que rodea a un evento en línea. 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:
videollamada-01.svg,chat-en-linea.svg,evento-virtual-01.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 todo lo que rodea a un evento en línea:
- Audio y video: videollamada (en varias composiciones), videochat, cámara web, micrófono, auriculares, sonido, alta definición, reproductor de video.
- El evento en sí: evento virtual (tres variantes), en vivo, presentación, educación virtual, fiesta, lugar del evento.
- Personas: usuario, usuarios, personas, lista de usuarios, anónimo, invitación, me gusta.
- Logística: calendario, horario, tiempo, ubicación, añadir, compartir, intercambio.
- Infraestructura: red, conexión, conectar, desconectar, servidor, servidor en la nube, dispositivos, cargando.
Descarga el pack
La descarga es directa, gratuita y no pide registro ni correo. El archivo es un ZIP de 2,2 MB: descomprímelo y ya tienes las carpetas listas.
Descargar los 50 iconos (ZIP · 2,2 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
cocina y
hotelería — publicamos 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 botón de 16 píxeles y en la diapositiva de apertura de tu webinar, 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), algunas plataformas de webinars 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 curso o tu overlay de stream.
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>
Videollamada
</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-videollamada {
display: inline-block;
width: 32px;
height: 32px;
background: #35d6c8;
-webkit-mask: url("iconos/videollamada-01.svg") center / contain no-repeat;
mask: url("iconos/videollamada-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.
- 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.
- OBS y overlays de stream: los PNG de 512 px con transparencia entran directo como "Imagen" en tu escena; para animarlos o recolorearlos en vivo, usa el SVG dentro de una fuente de navegador.
- PowerPoint y Google Slides: inserta el SVG como imagen. En PowerPoint, clic derecho → Convertir en forma para recolorearlo como elemento nativo.
-
Tu web o plataforma de cursos: lo más rápido es
<img src="en-vivo.svg" alt="En vivo" 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 del sitio de tu evento? 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: landings de webinars, plataformas de cursos, overlays de stream, apps de videollamadas, 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 todo lo que gira alrededor de un evento en línea: la landing de un webinar, la interfaz de una app de videollamadas, presentaciones sobre trabajo remoto, paneles de streaming, invitaciones digitales y material de cursos virtuales. Cubren conexión, participantes, audio y video, y la logística del evento.
¿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.
¿En qué tamaño vienen los PNG?
Cada icono viene en PNG de 512 × 512 píxeles con fondo transparente, en las dos variantes. Es un tamaño generoso que puedes reducir sin pérdida al que necesites; para ampliaciones mayores usa directamente el SVG, que no pierde nitidez a ningún tamaño.
¿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.