Avatares vectoriales e iconos gratuitos para diseño UI en 2026

Mariusz Szatkowski

Última verificación: 12 de octubre de 2026

30 min de lectura

Guía

Diseñador UI/UX

500+ proyectos WP

#Cómo evolucionaron los iconos en el diseño web

Hace quince años, un set de iconos para la web llegaba como un ZIP con archivos PSD o PNG que había que recortar a mano en Photoshop. Hoy el mismo trabajo se resuelve con bibliotecas SVG gratuitas, generadores de avatares programáticos y animaciones Lottie. Para quien desarrolla en WordPress o diseña interfaces, esta evolución significa poder construir interfaces cuidadas sin pagar licencias de iconos, siempre que se lea la licencia de cada recurso y se suban los SVG de forma segura.

En este repaso práctico revisamos los recursos vectoriales gratuitos disponibles en 2026, con sus licencias, y cómo implementarlos en proyectos WordPress sin abrir agujeros de seguridad ni de accesibilidad.

#Por qué los iconos PNG no escalaban

Hace apenas quince años, el flujo de trabajo estándar para cualquier diseñador web comenzaba con Photoshop. Los iconos se descargaban como archivos PSD o PNG con resoluciones fijas, generalmente 16x16, 32x32 y 64x64 píxeles. Cada tamaño era un archivo separado, y si necesitabas un icono en un tamaño intermedio, te tocaba rediseñarlo desde cero o aceptar la pixelación.

Las colecciones de iconos más populares de esa época, como Fugue Icons, Silk Icons de FamFamFam y Tango Desktop Project, fueron importantes en su momento. Ofrecían cientos de iconos consistentes en estilo, lo que permitía a los diseñadores construir interfaces coherentes sin dibujar cada icono manualmente.

La transparencia alfa del formato PNG fue un gran avance, porque permitió que los iconos se integraran sobre fondos distintos sin los bordes dentados típicos de la transparencia de un solo bit del GIF. El problema de fondo seguía ahí: escalar un icono más allá de sus dimensiones de diseño producía pixelación visible. En un mundo donde los dispositivos iban desde monitores CRT hasta las primeras pantallas Retina de Apple, los iconos basados en píxeles se rompían constantemente, y cada resolución nueva significaba producir un nuevo juego completo de iconos.

#Por qué usar iconos SVG en lugar de PNG

La adopción masiva de SVG (Scalable Vector Graphics) cambió las reglas del juego. A diferencia de los formatos rasterizados como PNG o JPG, un archivo SVG describe formas, líneas, curvas, rellenos y trazos de forma matemática, no mediante píxeles individuales. Esto significa que un único archivo SVG se renderiza con nitidez a cualquier tamaño, desde un favicon de 16 píxeles hasta un cartel impreso de dos metros.

SVG 1.1 es una recomendación del W3C, y su sucesor, SVG 2, todavía tiene el estatus de Candidate Recommendation: el W3C publicó la instantánea más reciente de esa especificación el 6 de octubre de 2026. En la práctica, la adopción de SVG la impulsaron el soporte nativo en los navegadores y la posibilidad de incrustar la etiqueta <svg> directamente en HTML5. El diseño web responsive, desarrollado a partir de 2010 aproximadamente, aceleró el cambio, porque los diseñadores buscaban gráficos nítidos en pantallas de cualquier tamaño y densidad de píxeles.

#Ventajas técnicas de SVG para WordPress

Escalabilidad: un solo archivo funciona en todos los tamaños y resoluciones de pantalla, sin necesidad de varias versiones del mismo icono.
Peso reducido: el icono de lupa de Heroicons (24/outline/magnifying-glass.svg en el repositorio del proyecto) ocupa 296 bytes, y el icono search.svg de Lucide 275 bytes (medición del 12 de octubre de 2026).
Estilizable con CSS: los SVG inline se pueden colorear, animar y transformar con CSS, sin editores gráficos. JavaScript también puede modificar cualquier elemento del gráfico, lo que permite efectos hover, animaciones y estilos según el estado de la aplicación.
Formato de texto: SVG es XML, así que el servidor puede comprimirlo en la transmisión igual que HTML y CSS, y el navegador lo renderiza sin plugins adicionales.
Animación nativa: con CSS Animations o SMIL, los SVG pueden animarse directamente sin JavaScript adicional.

#Cómo mejoran los iconos SVG la accesibilidad

SVG admite marcado que las tecnologías de asistencia saben leer. Los elementos <title> y <desc> aportan una alternativa textual, y los atributos ARIA permiten marcar un icono como significativo o decorativo. Los detalles y ejemplos de código están en la sección sobre iconos accesibles, más abajo.

Los gráficos vectoriales también funcionan mejor con el zoom de la página y los modos de alto contraste. Cuando el usuario amplía el texto, el icono SVG escala sin los artefactos que aparecen al ampliar un mapa de bits más allá de su resolución nativa.

Las propiedades de un SVG pueden cambiarse en CSS, así que el icono puede reaccionar a las preferencias del usuario, por ejemplo a las media queries prefers-color-scheme y prefers-contrast, cambiando el color o el grosor del trazo.

#Las mejores bibliotecas de iconos SVG gratuitas en 2026

El mercado de bibliotecas de iconos en 2026 incluye tanto sets clásicos como sistemas con muchas variantes. Estas son las que conviene conocer si desarrollas para WordPress.

#Heroicons de Tailwind Labs

Heroicons, de los creadores de Tailwind CSS (Tailwind Labs), existe en cuatro variantes: 24x24 outline, 24x24 solid, 20x20 solid y 16x16 solid. Los paquetes @heroicons/react y @heroicons/vue ofrecen los iconos como componentes, también se pueden usar como SVG puro, y el repositorio del proyecto indica licencia MIT. Encaja de forma natural en proyectos con Tailwind, pero funciona en cualquier proyecto.

#Feather Icons

Feather apuesta por la sencillez: cada icono está diseñado sobre una cuadrícula de 24x24 y el grosor de trazo por defecto es 2. El proyecto tiene licencia MIT.

#Lucide Icons

Lucide es una bifurcación comunitaria de Feather Icons con más de 1600 iconos según el repositorio del proyecto, con licencia ISC. Todos los iconos comparten el mismo grosor de trazo, radio de esquina y cuadrícula. Lucide tiene paquetes oficiales para React, Vue, Svelte, Angular, Astro y otros entornos, y su paquete npm permite importar solo los iconos que usas.

#Phosphor Icons

Phosphor es una familia de iconos en seis pesos: Thin, Light, Regular, Bold, Fill y Duotone, con licencia MIT. Cada icono existe en todas las variantes, así que los sets se combinan sin choques. El estilo Duotone sirve para interfaces que necesitan jerarquía visual sin recurrir a varios colores. Phosphor tiene implementaciones para React, Vue, Figma y web components.

#Material Symbols de Google

Material Symbols, la evolución de Material Icons, es una fuente variable de iconos con cuatro ejes: relleno (0 a 100), peso (100 a 700), grado (de -50 a 200) y tamaño óptico (20 a 48 px). Según el repositorio de Google, los iconos se publican con licencia Apache 2.0. La apariencia del icono se controla desde CSS:

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

#Tabler Icons

Según el README del proyecto, Tabler Icons incluye 6238 iconos (5184 de contorno y 1054 rellenos, a octubre de 2026), sobre una cuadrícula de 24x24 con trazo de 2 px y licencia MIT. Los iconos de contorno se pueden aligerar o engrosar cambiando stroke-width.

#Licencias de los sets de iconos gratuitos comparadas

Gratuito no significa sin condiciones. Las diferencias entre licencias afectan sobre todo a la atribución y a lo que hay que incluir con las copias de los archivos.

Set	Licencia	Qué exige
Font Awesome Free	iconos CC BY 4.0, fuentes SIL OFL 1.1, código MIT	atribución; los archivos descargados ya la llevan en comentarios
Material Symbols	Apache 2.0	conservar el aviso de licencia al redistribuir
Heroicons	MIT	incluir el aviso de copyright y la licencia en las copias
Lucide	ISC (iconos procedentes de Feather: MIT)	aviso de copyright y licencia en las copias
Phosphor, Tabler, Feather	MIT	aviso de copyright y licencia en las copias
Humaaans	CC0	ningún requisito
DiceBear	código MIT, estilos con licencias propias	depende del estilo, por ejemplo Fun Emoji CC BY 4.0

Font Awesome separa en el archivo de licencia de la versión Free tres licencias: CC BY 4.0 para los iconos, SIL OFL 1.1 para los iconos empaquetados como fuentes web y de escritorio, y MIT para el resto de archivos. El mismo archivo pide no eliminar los comentarios de atribución que ya contienen los archivos descargados.

Las licencias MIT e ISC exigen que el aviso de copyright y el texto de la licencia acompañen a las copias del software. La página de licencia de Lucide no menciona una atribución visible en la web: la obligación se refiere al aviso dentro de los archivos distribuidos. Apache 2.0 incluye además una licencia de patentes explícita.

#Iconos de redes sociales, banderas y métodos de pago

Además de las bibliotecas de uso general, existen sets especializados.

Iconos de redes sociales: contienen los logotipos de las principales plataformas en formato vectorial. Sirven para botones de compartir, secciones de contacto y pies de página. El logotipo de una plataforma sigue siendo una marca registrada de su propietario, así que conviene revisar las directrices de marca de cada plataforma.

Iconos de banderas: banderas de países y regiones en formato vectorial, útiles en selectores de idioma, calculadoras de envío y selección de país. Los sets suelen nombrar los archivos con los códigos de país ISO 3166-1, lo que facilita el mapeo.

Iconos de métodos de pago: logotipos de tarjetas, monederos digitales y métodos de pago locales, usados en los carritos de las tiendas online.

#Generadores de avatares SVG gratuitos

En lugar de elegir avatares de una biblioteca cerrada, puedes generarlos de forma programática a partir del identificador del usuario, su nombre u otro atributo. Así no dependes de fotos de perfil subidas, que a menudo faltan, y cada usuario recibe un avatar único y consistente basado en una semilla (seed).

#DiceBear

DiceBear genera avatares SVG a partir de una cadena de entrada (seed), de modo que el mismo usuario siempre recibe el mismo avatar. La integración más sencilla es una URL con el identificador como parámetro:

<img src="https://api.dicebear.com/10.x/lorelei/svg?seed=mariusz" alt="" width="64" height="64" />

En WordPress, la URL puede construirse a partir del email del usuario:

function get_dicebear_avatar($user_email, $style = 'lorelei') {
    $seed = md5(strtolower(trim($user_email)));
    return "https://api.dicebear.com/10.x/{$style}/svg?seed={$seed}";
}

Según la documentación de la API HTTP de DiceBear, la versión actual de la API es la 10.x (las versiones 5.x a 8.x están retiradas), el límite es de 50 peticiones por segundo para SVG y la API pública es gratuita para usos no comerciales. Para uso comercial o límites más altos, la documentación recomienda montar una instancia propia. El código de DiceBear tiene licencia MIT, pero cada estilo de avatar tiene su propia licencia, descrita en la página de licencias de DiceBear: Lorelei es CC0 1.0, Fun Emoji es CC BY 4.0 (exige atribución), y Avataaars y Bottts tienen condiciones propias de sus autores que permiten el uso personal y comercial.

#Humaaans

Humaaans, de Pablo Stanley, es un sistema modular de ilustración: el diseñador combina cabezas, torsos, piernas y fondos para crear escenas y personajes. La web del proyecto indica licencia CC0, que permite el uso comercial y personal, y enlaza a versiones para Sketch, un ejemplo en InVision Studio y una colección en Blush.

El enfoque modular es útil en aplicaciones que necesitan muchos avatares distintos. En lugar de elegir entre combinaciones ya hechas, puedes generar variantes de forma programática a partir de distintos componentes y adaptarlas a la estética de la marca.

#Boring Avatars

Boring Avatars es una biblioteca React con licencia MIT de la organización boringdesigners, con seis variantes (marble, beam, pixel, sunset, ring, bauhaus). El avatar se genera a partir de la propiedad name, que puede ser el nombre de usuario o el email. Es determinista: el mismo nombre siempre produce el mismo avatar, lo que garantiza consistencia visual entre sesiones.

#Multiavatar

Multiavatar es un generador cuyos autores indican en la web del proyecto 12.230.590.464 avatares posibles. Las condiciones completas de la licencia están en una página aparte del proyecto, y conviene leerlas antes de usarlo en un producto.

#Bean Heads

Bean Heads (antes Big Heads) es un componente React de Robert Broersma con licencia MIT para componer personajes a partir de propiedades como el pelo, los ojos o el color de piel.

#Bibliotecas gratuitas de ilustraciones vectoriales

Las bibliotecas de ilustraciones ofrecen gráficos pensados para usarse juntos, con un estilo, una paleta y un lenguaje visual coherentes.

unDraw, de Katerina Limpitsouni, es una colección de ilustraciones de estilo plano que cubre temas desde los negocios hasta la vida cotidiana. En la web del proyecto se elige el color de acento antes de descargar, así que la ilustración encaja de inmediato con la paleta de la marca. unDraw tiene su propia licencia, publicada en la web del proyecto, y conviene leerla antes de usarla en un proyecto de cliente.

En la práctica basta con elegir la ilustración, ajustar el color de acento, descargar el SVG e incrustarlo en la plantilla. El código SVG se puede seguir estilizando con propiedades CSS o atributos inline.

#Cómo subir SVG a WordPress de forma segura

#Por qué WordPress bloquea SVG por defecto

WordPress no incluye SVG en la lista de tipos de archivo permitidos por defecto. La razón es técnica: una imagen PNG son datos de píxeles, mientras que un SVG es un documento XML que puede contener JavaScript, referencias a recursos externos y otras construcciones que ejecuta el navegador. Un archivo SVG abierto directamente en el navegador puede lanzar un script en el contexto del dominio del sitio, por ejemplo a través de etiquetas <script> o atributos de eventos como onload.

Es un riesgo de ataques de tipo cross-site scripting (XSS). Un script ejecutado en el contexto del sitio puede leer datos de sesión o realizar acciones en nombre de un administrador conectado.

La restricción se puede levantar de forma segura si cada archivo subido pasa por una sanitización y solo los usuarios de confianza tienen permiso para subir SVG. Permitir el tipo MIME es la parte fácil:

// Ejemplo de filtro para permitir SVG sanitizado
add_filter('upload_mimes', function($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
});

Este fragmento solo no basta. Hay que complementarlo con una sanitización que elimine los elementos peligrosos del SVG antes de guardarlo.

#Plugins Safe SVG y SVG Support

El plugin Safe SVG es el camino más sencillo. Según su página en el directorio de WordPress.org, su autor es 10up, tiene más de un millón de instalaciones activas y la sanitización la realiza la biblioteca svg-sanitizer de Daryll Doyle (enshrined/svg-sanitize). El plugin elimina el código peligroso al subir el archivo, muestra vistas previas de los SVG en la biblioteca de medios, permite limitar la subida de SVG a usuarios concretos y, de forma opcional, optimiza los archivos con SVGO (desactivado por defecto).

La instalación es simple: instala y activa el plugin desde el directorio de WordPress, limita si hace falta quién puede subir SVG y sube los archivos desde la biblioteca de medios. La sanitización funciona automáticamente en cada subida.

El plugin SVG Support, de Benbodhi (página en el directorio), también sanitiza los archivos subidos y tiene un modo avanzado: la clase style-svg añadida a un bloque de imagen renderiza el SVG inline, de modo que se puede estilizar con CSS.

#Sanitización manual de SVG con PHP

La sanitización manual da control total a quien programa. El siguiente ejemplo muestra el principio, pero las expresiones regulares no son un parser XML completo, así que en producción es mejor usar la biblioteca enshrined/svg-sanitize, la misma que usa Safe SVG:

<?php
/**
 * Ejemplo simplificado de sanitización de SVG.
 * En producción usa la biblioteca enshrined/svg-sanitize.
 */
function wppoland_sanitize_svg($svg_content) {
    // Elimina las etiquetas script
    $svg_content = preg_replace('/<script[^>]*?>.*?<\/script>/is', '', $svg_content);

    // Elimina los manejadores de eventos
    $svg_content = preg_replace('/\s*on\w+\s*=\s*["\'][^"\']*["\']/is', '', $svg_content);
    $svg_content = preg_replace('/\s*on\w+\s*=\s*[^\s>]+/is', '', $svg_content);

    // Elimina las URL javascript:
    $svg_content = preg_replace('/href\s*=\s*["\']?\s*javascript:[^"\']*["\']?/is', 'href="#"', $svg_content);

    return $svg_content;
}

#Cómo insertar SVG inline en un tema WordPress

El SVG inline, es decir, el código SVG incrustado directamente en el HTML en lugar de una referencia a un archivo, permite estilos que no están disponibles para archivos externos. Cada elemento del gráfico es accesible para CSS y JavaScript, lo que permite efectos hover, cambios de color dinámicos y animaciones.

Integración básica de SVG inline:

<?php
function wppoland_render_icon($icon_name, $classes = '') {
    $svg_path = get_template_directory() . '/assets/icons/' . sanitize_file_name($icon_name) . '.svg';

    if (file_exists($svg_path)) {
        $svg_content = file_get_contents($svg_path);

        // Elimina los atributos width/height para que el icono escale con CSS
        $svg_content = preg_replace('/(width|height)=["\'][^"\']*["\']/', '', $svg_content);

        // Añade viewBox si falta
        if (strpos($svg_content, 'viewBox') === false) {
            $svg_content = preg_replace('/<svg/', '<svg viewBox="0 0 24 24"', $svg_content, 1);
        }

        // Añade clases propias
        if (!empty($classes)) {
            $svg_content = preg_replace('/<svg/', '<svg class="' . esc_attr($classes) . '"', $svg_content, 1);
        }

        return $svg_content;
    }

    return '';
}

Estilos CSS para SVG inline:

.icon {
    width: 24px;
    height: 24px;
    transition: fill 0.3s ease, stroke 0.3s ease;
}

.icon:hover {
    fill: #ff6b6b;
    stroke: #333;
}

/* Ejemplo de icono animado */
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.icon.animated:hover {
    animation: iconPulse 0.5s ease-in-out;
}

#Cómo optimizar archivos SVG con SVGO y sprites

La optimización de los archivos SVG importa sobre todo en páginas con muchos iconos.

SVGO es, según la documentación del proyecto, una biblioteca de Node.js y una herramienta de línea de comandos para optimizar SVG. Elimina metadatos de editores, comentarios, elementos ocultos y valores por defecto o poco óptimos, cuando puede hacerlo sin cambiar el aspecto. Lo ideal es ejecutarlo en el proceso de build del tema.

Un sprite con elementos <symbol> reúne muchos iconos en un solo bloque SVG, y cada icono se invoca con <use>. El código del trazado llega a la página una sola vez, aunque el icono aparezca varias veces:

<?php
function wppoland_icon_sprite() {
    ?>
    <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <symbol id="icon-menu" viewBox="0 0 24 24">
            <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" fill="none"/>
        </symbol>
        <!-- Más iconos -->
    </svg>
    <?php
}
add_action('wp_body_open', 'wppoland_icon_sprite');

Un icono del sprite se referencia así:

<!-- Referencia a un icono del sprite -->
<svg class="icon" aria-hidden="true">
  <use href="#icon-search"></use>
</svg>

La carga diferida afecta a los archivos SVG insertados con <img>: el atributo loading="lazy" funciona con ellos igual que con otras imágenes. El SVG inline forma parte del HTML, así que no hay nada que cargar de forma diferida.

#Animaciones Lottie gratis para microinteracciones web

El paso siguiente al SVG estático fue el gráfico vectorial animado. Lottie es una biblioteca de Airbnb que, según la documentación del proyecto lottie-web, lee animaciones de Adobe After Effects exportadas a JSON con el plugin Bodymovin y las renderiza de forma nativa en aplicaciones web y móviles.

Los archivos Lottie son representaciones JSON de animaciones exportadas desde After Effects. Contienen la información necesaria para el renderizado: trazados, rellenos, transformaciones y datos de fotogramas clave. La biblioteca permite reproducir, repetir en bucle, saltar a un fotograma concreto y cambiar propiedades desde el código.

Para el diseño de interfaces, esto significa que las animaciones de carga, las confirmaciones de éxito, las secuencias de onboarding y las microinteracciones pueden ser vectoriales y controlarse por código en lugar de incrustarse como GIF o vídeo.

#Por qué usar Lottie en lugar de GIF

Peso: una animación Lottie es un archivo JSON con datos vectoriales, no una secuencia de fotogramas rasterizados, por lo que suele pesar mucho menos que un GIF equivalente.
Escalabilidad: al ser vectorial, una animación Lottie se ve nítida en cualquier resolución.
Interactividad: las animaciones pueden responder al scroll, al hover, a los clics y a otros eventos del usuario.
Accesibilidad: a diferencia del GIF, una animación Lottie se puede pausar desde el código y adaptar a la preferencia prefers-reduced-motion del usuario.

#Bibliotecas de animaciones Lottie gratuitas

LottieFiles es la plataforma principal para encontrar animaciones Lottie gratuitas. Cubre casi cualquier necesidad: iconos animados de carga, transiciones de estado, ilustraciones explicativas y efectos de celebración. Antes de usar una animación, revisa la licencia indicada en su ficha.

#Cómo añadir animaciones Lottie en WordPress

Las animaciones Lottie se incrustan con un reproductor que se encarga del renderizado y del control de la reproducción.

<!-- Reproductor Lottie en versión fijada (npm: @lottiefiles/lottie-player) -->
<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

<!-- Animación alojada en tu propio servidor -->
<lottie-player
  src="/animations/loading-spinner.json"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px"
  loop
  autoplay
></lottie-player>

La versión del reproductor está fijada porque @latest puede cambiar el comportamiento de la página tras una actualización del paquete sin ningún cambio en tu código. El archivo JSON de la animación conviene alojarlo en tu propio servidor.

En WordPress, las animaciones Lottie se pueden incrustar mediante un shortcode o un bloque, y en el directorio de plugins hay soluciones que añaden un bloque Lottie con control de reproducción.

#Cómo animar SVG con CSS

Las animaciones CSS aplicadas a elementos SVG no necesitan JavaScript. Dos patrones habituales de interfaz son el indicador de carga que gira y el icono de notificación que rebota:

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon.loading {
    animation: iconSpin 1s linear infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.icon.notification {
    animation: iconBounce 0.6s ease-in-out 2;
}

Estas reglas funcionan con SVG inline y pueden reaccionar al hover, al estado de la aplicación o a clases añadidas por un script.

#Cómo afectan las animaciones SVG al rendimiento

Los gráficos animados requieren atención para no ralentizar la página.

Limita el alcance de la animación a los elementos relevantes en lugar de todo el gráfico. Anima propiedades concretas, como opacity, transform o fill, en lugar de propiedades que obligan a recalcular el diseño.

Usa transform para el movimiento (translate, scale, rotate). Los navegadores pueden animar transform y opacity sin recalcular el diseño de la página, algo que no ocurre con top, left o margin.

Respeta la media query prefers-reduced-motion. Los usuarios sensibles al movimiento pueden activar en el sistema la reducción de animaciones, y la página debería mostrar entonces una versión estática o muy simplificada:

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

#Cómo insertar iconos SVG inline en el build con Astro

Si usas un stack headless (por ejemplo, Astro o Next.js) con WordPress como CMS de back-end, cargar paquetes de iconos dinámicos en tiempo de ejecución puede aumentar el tamaño del JavaScript que se envía al navegador. Es mejor resolver los iconos SVG e insertarlos inline durante la fase de build estático.

Este componente de Astro lee un icono de forma estática durante la compilación:

---
// Icon.astro - inserta un SVG inline en tiempo de build
interface Props {
  name: string;
  className?: string;
}

const { name, className = 'icon-svg' } = Astro.props;

// Lee el contenido SVG de un directorio local o de una API
const svgPath = `src/assets/icons/${name}.svg`;
let svgContent = '';

try {
  const fs = await import('fs/promises');
  const raw = await fs.readFile(svgPath, 'utf8');
  
  // Extrae el contenido del interior del envoltorio <svg>
  svgContent = raw.replace(/<svg[^>]*>|<\/svg>/g, '');
} catch (err) {
  console.error(`Build Error: Could not locate icon: ${name}.svg`);
}
---

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 24 24" 
  class={className} 
  fill="none" 
  stroke="currentColor" 
  stroke-width="2" 
  set:html={svgContent}
/>

El componente no genera nada de JavaScript en el cliente: los datos vectoriales quedan insertados directamente en el HTML durante la compilación estática.

#Cómo generar un sprite SVG en el build

Para no repetir los mismos trazados SVG varias veces en un documento, genera un sprite estático. Cómo funcionan los elementos <symbol> y <use> lo explicamos más arriba, en la sección sobre SVGO y sprites; este script crea el sprite automáticamente a partir de una carpeta de iconos:

// Fragmento de script de build para Vite/Astro
import fs from 'fs/promises';
import path from 'path';

async function buildSvgSprite(iconDir, outputFile) {
  const files = await fs.readdir(iconDir);
  let spriteContent = '<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">\n';

  for (const file of files) {
    if (path.extname(file) === '.svg') {
      const id = path.basename(file, '.svg');
      const content = await fs.readFile(path.join(iconDir, file), 'utf8');
      
      // Extrae el contenido y lo envuelve en <symbol>
      const cleanContent = content
        .replace(/<svg[^>]*>/, `<symbol id="icon-${id}" viewBox="0 0 24 24">`)
        .replace('</svg>', '</symbol>');
      
      spriteContent += cleanContent + '\n';
    }
  }
  
  spriteContent += '</svg>';
  await fs.writeFile(outputFile, spriteContent);
}

Inserta el sprite generado una vez por página (en un tema WordPress, el hook wp_body_open es un buen sitio, como en el ejemplo de esa sección) y referencia cada icono con <use>: <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>.

#Cómo generar avatares SVG como data URI en Base64

Para no almacenar miles de imágenes de perfil sueltas en secciones de comentarios o directorios, puedes generar avatares vectoriales por código. Devuélvelos como data URI codificados en base64 y podrás usarlos directamente en propiedades background de CSS o en atributos src normales.

Esta implementación en PHP genera avatares SVG geométricos y los devuelve como data URI:

declare(strict_types=1);

namespace WPPoland\UI\Avatars;

/**
 * Genera un data URI SVG codificado en base64 a partir del hash de una cadena.
 */
function get_avatar_data_uri( string $seed ): string {
    $hash = md5( strtolower( trim( $seed ) ) );
    
    $color_primary   = '#' . substr( $hash, 0, 6 );
    $color_secondary = '#' . substr( $hash, 6, 6 );
    
    $shape_type = hexdec( substr( $hash, 12, 1 ) ) % 4;
    $rotation   = hexdec( substr( $hash, 13, 2 ) );

    $svg = sprintf(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" style="background:%s;">',
        esc_attr( $color_secondary )
    );

    $svg .= sprintf( '<g transform="rotate(%d 50 50)">', $rotation );

    switch ( $shape_type ) {
        case 0:
            $svg .= sprintf( '<circle cx="50" cy="50" r="30" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 1:
            $svg .= sprintf( '<polygon points="50,15 15,80 85,80" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 2:
            $svg .= sprintf( '<polygon points="50,10 90,50 50,90 10,50" fill="%s" />', esc_attr( $color_primary ) );
            break;
        case 3:
            $svg .= sprintf( '<rect x="25" y="25" width="50" height="50" rx="10" fill="%s" />', esc_attr( $color_primary ) );
            break;
    }

    $svg .= '</g></svg>';

    return 'data:image/svg+xml;base64,' . base64_encode( $svg );
}

La función devuelve un avatar escalable sin guardar ningún archivo de imagen:

<img src="<?php echo esc_attr( get_avatar_data_uri( '[email protected]' ) ); ?>" alt="User Avatar" />

#Cómo migrar de iconos PNG a SVG en WordPress

Una migración de iconos no necesita una auditoría compleja. Necesita saber qué iconos usa el tema, de dónde salen y bajo qué licencia se pueden usar los sustitutos.

#Pasos para migrar los iconos a SVG

Inventario y licencias
- Lista los iconos PNG que usa el tema y en qué plantillas aparecen
- Elige una biblioteca que cubra la mayoría de ellos con un estilo coherente
- Comprueba la licencia (MIT, ISC, Apache 2.0, CC BY) y lo que exige en las copias o en la atribución
- Identifica los huecos donde necesitarás iconos propios
Preparación de los archivos
- Pasa los SVG por SVGO en el proceso de build del tema
- Reúne los iconos frecuentes en un sprite con elementos <symbol>
- Sustituye los colores fijos por currentColor para que el icono herede el color del texto
Implementación y accesibilidad
- Cambia las etiquetas <img> de los PNG por referencias al sprite o por SVG inline
- Marca los iconos decorativos con aria-hidden="true" y da a los significativos un nombre accesible
- Si los SVG se suben a la biblioteca de medios, activa la sanitización antes de permitir la subida

#Cómo gestionar iconos en un sistema de diseño

Las aplicaciones empresariales y los sitios grandes necesitan muchos iconos: acciones, indicadores de estado, elementos de navegación y conceptos. Mantener la coherencia visual en cientos de iconos es un reto que el enfoque vectorial ayuda a resolver de forma sistemática.

Los sistemas de diseño tratan los iconos vectoriales como componentes básicos. Cuando las formas base, el grosor de los trazos, los radios de las esquinas y las correcciones ópticas son parámetros de todo el sistema, los iconos nuevos mantienen la coherencia con los existentes. Esto reduce las pequeñas incoherencias que aparecen cuando cada diseñador dibuja los iconos a su manera.

Los iconos SVG funcionan bien con los design tokens: el color, el tamaño y el grosor del trazo de un icono se pueden gestionar junto con los colores, los espaciados y la tipografía. Cambiar la definición centralizada de un token cambia el aspecto de los iconos en toda la aplicación.

#Cómo documentar un sistema de iconos

Crea un inventario centralizado de todos los iconos que usa tu ecosistema digital. Cada icono debería tener documentación con: nombre canónico, casos de uso aprobados, tamaños mínimos permitidos y variaciones de color. Herramientas como Figma facilitan la creación de bibliotecas de componentes compartidas.

#Cómo mantener un estilo de iconos coherente

Una cuadrícula común hace que los iconos ocupen el mismo espacio y tengan un peso visual similar. Heroicons, Feather, Lucide y Tabler diseñan sus iconos sobre una cuadrícula de 24x24, y Material Symbols tiene un tamaño óptico por defecto de 24 px. Al combinar iconos de distintas fuentes, la cuadrícula común es la primera condición de coherencia.

Un grosor de trazo uniforme mantiene el mismo grosor de línea en todo el set. Mezclar trazos finos y gruesos en la misma interfaz da una sensación caótica. Si el set ofrece varios grosores, elige uno para toda la interfaz.

Las correcciones ópticas ajustan las formas a la percepción humana. Un círculo y un cuadrado de las mismas dimensiones no parecen igual de grandes, por eso el círculo suele sobresalir un poco de la línea del cuadrado. Las bibliotecas de iconos bien cuidadas ya incorporan estas correcciones.

#Colores de iconos SVG y modo oscuro

Los iconos tienen que funcionar en distintos contextos de color, desde el modo oscuro hasta los estilos de marca.

currentColor hace que el icono herede el color del texto de su contenedor. En el archivo SVG pon fill="currentColor" o stroke="currentColor", y controla el color desde CSS:

.icon {
    color: #666;
}

.icon:hover {
    color: #ff6b6b;
}

Las propiedades personalizadas de CSS ordenan los colores de los iconos en todo el sistema. Combinadas con la media query prefers-color-scheme, evitan mantener dos juegos de iconos para el modo claro y el oscuro:

:root {
    --icon-primary: #333;
    --icon-secondary: #666;
    --icon-accent: #ff6b6b;
    --icon-disabled: #ccc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --icon-primary: #eee;
        --icon-secondary: #aaa;
    }
}

.icon { color: var(--icon-primary); }
.icon.secondary { color: var(--icon-secondary); }
.icon.accent { color: var(--icon-accent); }
.icon.disabled { color: var(--icon-disabled); }

#Cómo hacer accesibles los iconos SVG

Un lector de pantalla no ve el icono, así que cada icono debe estar descrito u oculto. La decisión depende de si el icono transmite información.

Un icono decorativo junto a un texto que ya dice lo mismo debe desaparecer del árbol de accesibilidad. MDN menciona los iconos como caso típico de uso de aria-hidden="true" y advierte: «No uses aria-hidden="true" en elementos que pueden recibir el foco» (MDN, aria-hidden, traducción propia). Los hijos heredan el atributo, así que no puede ponerse en el elemento padre de un botón o un enlace.

Un icono significativo incrustado inline recibe role="img" y un nombre accesible. MDN recomienda role="img" en el <svg> exterior, porque así el lector de pantalla trata el gráfico como una sola unidad en lugar de leer sus elementos hijos (MDN, rol img). Si hay un texto visible al lado, es mejor indicar el nombre con aria-labelledby; si no, con aria-label.

El elemento <title> da al gráfico una descripción breve y accesible, que los navegadores suelen mostrar como tooltip. Para la compatibilidad con SVG 1.1 debería ser el primer hijo de su elemento padre (MDN, elemento title).

Un icono como <img> cargado desde un archivo SVG sigue las mismas reglas que cualquier otra imagen. W3C WAI recomienda un atributo alt="" vacío para las imágenes decorativas, porque sin atributo alt algunos lectores de pantalla leen el nombre del archivo (W3C WAI, imágenes decorativas).

<!-- Botón solo con icono: el nombre va en el botón, el icono se oculta -->
<button type="button" aria-label="Buscar">
    <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#icon-search"></use></svg>
</button>

<!-- Icono significativo sin texto visible -->
<svg role="img" aria-labelledby="status-title" viewBox="0 0 24 24">
    <title id="status-title">Estado: activo</title>
    <circle cx="12" cy="12" r="8" fill="currentColor"/>
</svg>

<!-- Icono decorativo como archivo -->
<img src="/icons/star.svg" alt="" width="24" height="24" />

Los indicadores de foco en los iconos interactivos permiten a quien navega con teclado ver dónde está:

.icon-button:focus-visible {
    outline: 2px solid #ff6b6b;
    outline-offset: 2px;
}

Más sobre los requisitos WCAG en WordPress en nuestra guía de accesibilidad WordPress y WCAG 2.2.

#Tendencias en iconos SVG para 2026

Los iconos variables ganan terreno: en lugar de varios archivos por peso y tamaño, una sola fuente variable se ajusta entre pesos y tamaños ópticos desde CSS. Google Material Symbols lidera esta tendencia con sus cuatro ejes (relleno, peso, grado y tamaño óptico), y bibliotecas como Phosphor ofrecen el mismo icono en varios pesos para que el sistema elija uno y lo mantenga.

#Cómo solucionar problemas comunes con SVG en la UI

#Por qué los iconos SVG se ven deformados

El problema suele deberse a la falta del atributo viewBox o a un conflicto de proporciones. Asegúrate de que los archivos SVG tengan viewBox y define el tamaño en CSS. No fijes a la vez width y height en el código cuando el icono tenga que escalar.

#Por qué no se muestra la animación Lottie

Comprueba que la ruta al archivo JSON es correcta y que el script del reproductor se ha cargado. La consola del navegador mostrará los errores de JavaScript o de red (por ejemplo, un 404 o una petición bloqueada por la política CSP).

#Iconos SVG que no cambian en modo oscuro

Los iconos con colores fijados en el código SVG no se adaptan solos. Usa currentColor en los atributos fill y stroke y define los colores en CSS con la media query prefers-color-scheme o con una clase del tema.

#Por qué WordPress bloquea SVG aunque haya un plugin

Algunas configuraciones de hosting y plugins de seguridad tienen sus propias restricciones de tipos de archivo, independientes de los ajustes de WordPress. Revisa las restricciones a nivel de servidor y los ajustes de los plugins de seguridad, y en Safe SVG comprueba también que tu rol tiene permiso para subir SVG.

#Conclusión

El ecosistema de recursos vectoriales gratuitos en 2026 está maduro. Con bibliotecas como Heroicons, Lucide y Phosphor, generadores como DiceBear y animaciones Lottie, cualquier desarrollador WordPress puede construir interfaces cuidadas sin un presupuesto de diseño elevado.

Un recurso gratuito sigue teniendo licencia. Antes de implementarlo, comprueba si el set exige atribución (Font Awesome Free, el estilo Fun Emoji de DiceBear), si basta con conservar el archivo de licencia (MIT, ISC, Apache 2.0) o si no exige nada (CC0).

Un icono bien implementado está descrito u oculto para el lector de pantalla, hereda el color con currentColor, pasa por la sanitización si entra en la biblioteca de medios y por SVGO antes de llegar al tema.

[1] Especificación W3C SVG 2; https://www.w3.org/TR/SVG2/

[2] MDN Web Docs, SVG; https://developer.mozilla.org/en-US/docs/Web/SVG

[3] lottie-web (Airbnb); https://github.com/airbnb/lottie-web

[4] DiceBear, API HTTP y licencias; https://www.dicebear.com/licenses/

[5] Humaaans; https://www.humaaans.com/

[6] unDraw; https://undraw.co/

[7] Plugin de WordPress Safe SVG; https://wordpress.org/plugins/safe-svg/

[8] Font Awesome Free, archivo de licencia; https://github.com/FortAwesome/Font-Awesome/blob/7.x/LICENSE.txt

[9] W3C WAI, imágenes decorativas; https://www.w3.org/WAI/tutorials/images/decorative/

Si quieres que los iconos de tu sitio WordPress pasen a SVG con licencias revisadas, sanitización y accesibilidad resueltas, escríbenos y revisamos el tema contigo.