Instalación y uso

Primeros pasos / 01

Usa los SVG directamente en HTML puro. No necesitas framework, JavaScript ni Neural UI.

Las 250 familias de iconos están disponibles aquí. Descarga el SVG que necesites; HTML puro no requiere instalar ningún paquete npm.

Funciona en cualquier página HTML; no necesita framework ni JavaScript.

Preparar el archivo SVG

No necesitas instalar un paquete. Descarga search.svg y guárdalo como /icons/search.svg entre los archivos públicos de tu web, o adapta la ruta del ejemplo.

/icons/search.svg

Descargar SVG

Usar el SVG en HTML

Muestra el archivo copiado con <img>. Si quieres cambiar el color con CSS, inserta el SVG inline en lugar de usar <img>.

<img src="/icons/search.svg" alt="Buscar" width="24" height="24">

Con HTML puro, el navegador descarga solo los archivos SVG que referencias, no el catálogo completo de iconos.

Variante y tamaño

Descarga search-filled.svg y cambia la ruta de la imagen para usar la variante de relleno. Ajusta width y height en <img> para cambiar el tamaño.

Uso accesible

En <img>, usa alt vacío si es decorativo o un texto descriptivo si aporta información. Un SVG inline informativo necesita role="img" y aria-label, sin aria-hidden. Nombra el botón si solo contiene un icono.

<img src="/icons/search.svg" alt="">
<img src="/icons/search.svg" alt="Buscar">

<svg
  class="brand-icon"
  xmlns="http://www.w3.org/2000/svg"
  width="24" height="24" viewBox="0 0 24 24"
  fill="none" stroke="currentColor"
  stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"
  fill-rule="evenodd" clip-rule="evenodd" role="img" aria-label="Buscar"
>
  <path d="M10.75 3.5a7.25 7.25 0 1 0 0 14.5 7.25 7.25 0 1 0 0-14.5M16.1 16.1l4.4 4.4" />
</svg>

<button type="button" aria-label="Buscar">
  <img src="/icons/search.svg" alt="">
</button>

Acerca de Neural Icons

250 familias de iconos, contorno y relleno. Licencia MIT para uso público y comercial. Las importaciones individuales evitan cargar el catálogo completo; no necesitas Neural UI.

Core, Angular, React y Vue 1.1.0 están publicados en npm con la etiqueta latest y las 250 familias.

Usa cualquier color.

Los SVG de Neural Icons usan currentColor. Un SVG insertado en el HTML hereda la propiedad CSS color del icono o de un elemento padre. Sirve cualquier color CSS válido: hexadecimal, RGB, nombres o tokens de diseño.

<svg
  class="brand-icon"
  xmlns="http://www.w3.org/2000/svg"
  width="24" height="24" viewBox="0 0 24 24"
  fill="none" stroke="currentColor"
  stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"
  fill-rule="evenodd" clip-rule="evenodd" aria-hidden="true"
>
  <path d="M10.75 3.5a7.25 7.25 0 1 0 0 14.5 7.25 7.25 0 1 0 0-14.5M16.1 16.1l4.4 4.4" />
</svg>

<style>
  .brand-icon { color: #8b5cf6; }
</style>

Los colores del panel de detalle son ejemplos, no una paleta fija. Un SVG mostrado con <img> no hereda el color CSS de la página; usa SVG inline para cambiarlo.