Cómo añadir iconos a React: lucide-react frente a react-icons, SVG en línea o sprites, tamaños de bundle medidos, tamaño con currentColor, accesibilidad y configuración en Next.js.
Instala un paquete de iconos como lucide-react o react-icons e importa cada icono por su nombre, por ejemplo import { Camera } from "lucide-react". Las importaciones con nombre permiten tree-shaking, así que solo se incluyen en el bundle los iconos que usas. Define el tamaño con props o con 1em, dales color mediante currentColor y oculta los decorativos con aria-hidden.
Elecciones rápidas
Esta guía trata de cómo integrar iconos en código React. Para saber qué sets de iconos gratis elegir y sus licencias, consulta nuestra lista de las mejores librerías de iconos gratis. Las cifras de tamaño salen de nuestros propios builds, con la herramienta y los ajustes indicados.
En nuestra prueba los dos fueron pequeños con una sola importación con nombre: 874 bytes con gzip para un icono de lucide-react y unos 1.3 KB para un icono de react-icons, porque react-icons añade un pequeño envoltorio compartido. Ambos crecen solo unos cientos de bytes por cada icono extra.
La mayoría de los componentes de iconos de React dibujan con currentColor, así que define el color CSS en el icono o en su padre, por ejemplo con una clase de color de texto. lucide-react y react-icons también aceptan una prop color.
Solo cuando el icono es lo único que transmite el significado. En ese caso dale role="img" y un aria-label, o pon la etiqueta en el botón que lo contiene. Los iconos junto a texto visible deben ocultarse con aria-hidden="true".
Sí. Los componentes de lucide-react y react-icons son SVG sin estado y se renderizan en el servidor. Solo necesitas "use client" en un componente que use estado o manejadores de eventos.
Cuando los mismos iconos aparecen muchas veces o en páginas que no son de React. Cada <use> es una referencia corta a un único archivo en caché, en lugar de repetir los datos completos del path en el HTML.
Cuatro formas de poner iconos en una app de React
Cada icono es una exportación con nombre. size, color y strokeWidth son props, y cualquier otra prop se pasa al svg.
Importa desde la ruta propia de la familia (fa, md, lu, fi, etc.). IconContext.Provider define valores por defecto para todos los iconos que contiene.
Pega los datos del path una vez y reutilízalo como cualquier componente. Un width y un height de 1em hacen que siga el tamaño del texto.
Empaquetamos importaciones de un solo icono con esbuild en modo producción y comprimimos el resultado con gzip. Las importaciones con nombre de ambos paquetes se mantienen pequeñas; una importación de namespace arrastra el set entero. React no se cuenta.
Tamaño medido que añaden las importaciones de iconos (minificado y luego gzip -9; sin contar React)
Define cada icono una vez como <symbol> y dibújalo donde quieras con <use>. Cambia el color en el contenedor y los dos iconos lo siguen, porque los paths usan currentColor.
Sirve los símbolos como /icons.svg y apunta cada icono a un id dentro de él. El navegador descarga el archivo y lo guarda en caché una sola vez. Un sprite externo debe estar en el mismo origen.
Los iconos que usan currentColor toman el color de texto de su padre, así que los estilos de hover y de modo oscuro no necesitan CSS específico para el icono. Cambia el valor de color y verás cómo lo siguen los dos iconos.
Un icono junto a texto visible es decoración: ocúltalo. Un icono que es el único contenido de un botón necesita que el botón tenga nombre.
Los componentes de lucide-react y react-icons se renderizan bien en Server Components porque son SVG simple sin estado. Solo el componente que gestiona un clic necesita "use client".
Next.js ya optimiza las importaciones de una lista de paquetes de iconos habituales, incluidos lucide-react y react-icons. Añade aquí cualquier otro paquete de iconos que uses para que los builds de desarrollo sigan siendo rápidos.
¿Primero tienes que elegir un set? Consulta
las mejores librerías de iconos gratis
Empieza gratis · Sin tarjeta de crédito