Cómo usar iconos SVG en HTML, CSS, React y Vue

Los iconos SVG son pequeños archivos vectoriales: se ven nítidos a cualquier tamaño, pesan unos pocos cientos de bytes y se pueden recolorear con CSS. Hay cuatro formas habituales de ponerlos en una página. Cuál conviene depende de si necesitas darle estilo al icono, de cuántos iconos tiene la página y del framework que uses.

1. Enlazar el SVG con una etiqueta <img>

El método más sencillo: trata el icono como cualquier otra imagen. Cada icono de Iconyz tiene una URL SVG pública, que aparece en el panel del icono.

<img src="https://iconyz.com/api/public/svg/lucide/house.svg"
     width="24" height="24" alt="Inicio">

El navegador guarda el archivo en caché y el icono nunca bloquea el renderizado del HTML. El inconveniente es que CSS no puede acceder al interior de una imagen, así que los estilos color y :hover no le afectan. En los iconos monocromos puedes indicar el color en la URL: añade ?color=%23e11d48 (#e11d48 codificado para URL). Encontrarás los detalles en la guía de la API SVG.

En aplicaciones en producción, plantéate descargar el SVG y servirlo desde tu propio sitio, para que tus páginas no dependan de una URL de terceros.

2. Pegar el SVG en línea

Abre un icono, elige SVG y copia el código directamente en tu HTML:

<button class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
       aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…"/>
  </svg>
  Inicio
</button>

El SVG en línea forma parte de la página, así que CSS lo controla por completo: color, tamaño, estados hover, transiciones e incluso trazados concretos. Las colecciones monocromas usan currentColor, de modo que el icono toma automáticamente el color de texto de su elemento padre. Es la opción más flexible y no necesita ninguna petición HTTP adicional.

El coste es el tamaño del HTML. Cada icono en línea añade sus trazados a todas las páginas que lo usan, algo que importa si repites el mismo icono cientos de veces, por ejemplo en una tabla larga.

3. Usar el icono desde CSS

Una máscara CSS convierte cualquier SVG monocromo en una forma rellena con background-color, así que el icono sigue el color del texto sin que su marcado esté en el HTML:

.icon-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
          mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
}

<span class="icon-home" aria-hidden="true"></span>

La pestaña CSS del panel de cada icono genera esta regla con el SVG incrustado como data URI, así que funciona sin ninguna petición externa. Usa máscaras solo con iconos monocromos: la máscara conserva la forma y descarta los colores propios del icono. Para iconos multicolor, usa background-image.

4. React y otros frameworks con JSX

JSX necesita atributos en camelCase (strokeWidth, no stroke-width) y reenvía las props. La pestaña React del panel de cada icono genera un componente listo para usar:

export function HouseIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
         viewBox="0 0 24 24" {...props}>
      <path fill="none" stroke="currentColor" strokeWidth={2} d="…" />
    </svg>
  );
}

// Uso
<HouseIcon className="text-blue-600" style={{ fontSize: 20 }} aria-hidden="true" />

Como el tamaño es 1em, el icono escala con font-size, y como el color es currentColor, las clases utilitarias como text-* de Tailwind lo recolorean. Guarda un archivo por icono, o agrupa los iconos en un módulo, para que tu bundler descarte los que no importes (tree-shaking). El mismo componente funciona en Preact, y la pestaña Solid ofrece la variante para Solid.

5. Vue y Svelte

En Vue, guarda el icono como un componente de archivo único. Los atributos que pases, como class, llegan al <svg> raíz:

<!-- HouseIcon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…" />
  </svg>
</template>

Svelte funciona igual: un archivo .svelte con el marcado SVG y {...$$props} en el elemento raíz. Ambos están disponibles como pestañas en el panel del icono.

Tamaño y color

• Usa 1em para el tamaño. Con ancho y alto en 1em, el icono se ajusta al texto que lo acompaña. Cambia font-size para redimensionarlo.
• Conserva el viewBox. El viewBox define el sistema de coordenadas del dibujo. Si lo quitas, el escalado deja de funcionar; redimensiona con el ancho y el alto.
• Respeta la cuadrícula. Los iconos dibujados sobre una cuadrícula de 24px se ven más nítidos a 24px, 48px u otros múltiplos. A 18px o 20px, los trazos finos pueden verse algo borrosos.
• Colorea los iconos monocromos con color. Con currentColor, una sola regla CSS resuelve los estados normal, hover y modo oscuro.
• Los iconos multicolor conservan su paleta. Los emojis, banderas y logotipos traen sus colores integrados. Recoloréalos solo si la licencia permite modificarlos, y nunca alteres logotipos de marcas.

Accesibilidad

Decide si el icono aporta significado. Los iconos decorativos junto a una etiqueta de texto deben ocultarse a los lectores de pantalla, y los iconos que aparecen solos necesitan una alternativa de texto:

<!-- Decorativo: el botón ya tiene una etiqueta de texto -->
<button><svg aria-hidden="true" …>…</svg> Guardar</button>

<!-- Botón solo con icono: etiqueta el botón y oculta el icono -->
<button aria-label="Cerrar"><svg aria-hidden="true" …>…</svg></button>

<!-- Imagen con significado -->
<img src="…/triangle-alert.svg" alt="Advertencia">

Revisa también el contraste: según WCAG 2.2, los iconos que transmiten información necesitan una relación de contraste de al menos 3:1 con su fondo.

¿Qué método elegir?

¿Listo para empezar? Busca en todas las colecciones o explora colecciones populares como Lucide, Tabler Icons y Material Design Icons. Antes de publicar, revisa la licencia de la colección; la guía de licencias de iconos explica qué exige cada una.