# Iconos gratis para React: 2.500 duotone y 250 banderas en un solo paquete MIT **URL:** \ **Category:** Desarrollo\ **Tags:** frontend, react, open-source, accesibilidad, iconos, diseño-ui\ **Created:** [29 Octubre, 2026 17:49 UTC](https://www.yodev.dev/t/iconos-gratis-para-react-2-500-duotone-y-250-banderas-en-un-solo-paquete-mit/5816 "2026-10-29T17:49:55Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\ **Post date:** [29 Octubre, 2026 17:49 UTC](https://www.yodev.dev/t/iconos-gratis-para-react-2-500-duotone-y-250-banderas-en-un-solo-paquete-mit/5816/1 "2026-10-29T17:49:55Z")
`@andrsrxn/icons` es una librería de iconos gratis para React con más de 2.500 iconos duotone y más de 250 banderas, con licencia MIT y lista para instalar con un solo comando. La versión 7.8.0 llegó a npm el 27 de octubre de 2026. Es obra de un solo diseñador y desarrollador, Andrés Raxón, que dibujó cada icono desde cero en Figma. Viene a cubrir un hueco concreto: los sets de iconos gratuitos casi siempre son outline o sólidos, y el duotone suele estar detrás de un muro de pago. ![Screenshot 2026-10-29 at 2.47.33 PM](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/0/091faa6ed5d7de43f0ff0601c161a5a8c67c4d35.png) > **[GitHub - andrsrxn/icons: React icon library with 2,500+ duotone icons and...](https://github.com/andrsrxn/icons)** > > React icon library with 2,500+ duotone icons and 250+ flags. Smooth, RTL-aware, and optimized SVGs. ## ¿Qué la distingue de otras librerías de React icons? Su regla de diseño: el segundo tono aparece solo donde aporta significado. El propio proyecto explica su motivación sin rodeos: no existían sets duotone gratuitos con el estilo adecuado. Phosphor Icons sí ofrece duotone gratis, pero aplica la capa extra a todos los iconos sin excepción. `@andrsrxn/icons` sigue tres reglas en su lugar: - **Duotone por defecto** en los iconos que tienen una distinción real entre trazo y relleno. - **Outline cuando corresponde.** Los iconos geométricos simples como `+`, `/` o `×` no reciben una capa de fondo decorativa. - **Relleno a demanda.** Hay una variante `filled` solo para los iconos con un estado activo o seleccionado real, como like, bookmark o estrella. El resultado es un set coherente dentro de una interfaz, donde el duotone sigue siendo una señal y no se convierte en ruido. ## ¿Qué incluye el paquete? El paquete tiene dos grupos: - **Iconos de interfaz:** proporción 1:1 y decorativos por defecto (`aria-hidden="true"`). - **Banderas:** proporción 3:2 y nombradas con el código ISO 3166-1 alfa-2 (`IconFlagGT`, `IconFlagUS`). Se tratan como imágenes informativas, con `role="img"` y el código del país como `aria-label`. Los continentes llevan el prefijo `C`, como `IconFlagCAF` para África e `IconFlagCNA` para América del Norte. Las banderas están adaptadas de FlagKit, de Bowtie, con licencia MIT, y el repositorio lo acredita como corresponde. El paquete de npm declara cero dependencias en tiempo de ejecución. La versión 7.8.0 se publicó desde GitHub Actions mediante npm trusted publishing y lleva atestaciones de procedencia SLSA. Es una señal tranquilizadora en un paquete mantenido por una sola persona, en un momento en que los ataques a la cadena de suministro en npm son rutina. Lo que no incluye: iconos de marcas ni logos. Para eso, el autor recomienda SVGL, theSVG y Simple Icons. ## ¿Qué necesitas antes de instalarla? Necesitas React 19 o superior. Es la dependencia peer declarada, así que los proyectos que siguen en React 18 quedan fuera. Además, el paquete es solo ESM. La documentación pide Node 20.16.0, 22.19.0 o 24.0.0 en adelante, y el campo `"type": "module"` en tu `package.json`. Un detalle: al momento de publicar esta nota, el campo `engines` del propio paquete declaraba `node ^24`, que es más estricto que la documentación. Tu gestor de paquetes puede mostrar una advertencia con versiones anteriores de Node. ## ¿Cómo se instala y se usa? Se instala con un comando. La documentación muestra pnpm, npm, yarn y bun: ```bash pnpm add @andrsrxn/icons ``` La documentación también recomienda, de forma opcional, un pequeño estilo global para los iconos de interfaz: ```css .icon-ui { flex-shrink: 0; pointer-events: none; } ``` Después importa lo que necesites. Los iconos de interfaz vienen de la raíz del paquete y las banderas de `/flags`, y ambas rutas admiten tree-shaking: ```tsx import { IconRocket } from '@andrsrxn/icons' import { IconFlagGT } from '@andrsrxn/icons/flags' export function App() { return (
) } ``` El tamaño, el color y el trazo funcionan como props o como clases de Tailwind: ```tsx ``` En las banderas, define solo el `width` para mantener la proporción 3:2. Añade `cover` si quieres que una bandera llene un cuadrado: ```tsx ``` El trazo por defecto es `1.5`. El autor desaconseja cambiarlo, porque los iconos se dibujaron para ese grosor, aunque `strokeWidth` está disponible si lo necesitas. ## ¿Cómo se usa en un proyecto real? Hay tres usos donde la librería luce de verdad: banderas, RTL y agentes de código. ### Iconos de banderas para un selector de país Es el caso obvio para un producto dirigido a Iberoamérica: un set de banderas coherente, con etiquetas accesibles incluidas, para un selector de país o una tabla de precios por región. Cada bandera es un componente con el nombre de su código ISO, así que no necesitas sprites ni un CDN de imágenes: ```tsx import { IconFlagAR, IconFlagCL, IconFlagCO, IconFlagES, IconFlagMX } from '@andrsrxn/icons/flags' const paises = [ { codigo: 'AR', nombre: 'Argentina', Bandera: IconFlagAR }, { codigo: 'CL', nombre: 'Chile', Bandera: IconFlagCL }, { codigo: 'CO', nombre: 'Colombia', Bandera: IconFlagCO }, { codigo: 'ES', nombre: 'España', Bandera: IconFlagES }, { codigo: 'MX', nombre: 'México', Bandera: IconFlagMX }, ] export function SelectorPais() { return (
    {paises.map(({ codigo, nombre, Bandera }) => (
  • {nombre}
    • ))}
) } ``` Como el nombre del país ya aparece en texto, la bandera se marca con `aria-hidden` para que el lector de pantalla no lo anuncie dos veces. Es el patrón que indica la documentación para usar una bandera como elemento decorativo. ### Soporte RTL sin voltear iconos a mano Importa una hoja de estilos en la raíz de tu aplicación: ```tsx import '@andrsrxn/icons/rtl.css' ``` Los iconos direccionales, como `arrow-start`, `chevron-end` y `panel-start`, detectan entonces el atributo `dir` de su elemento padre más cercano y se voltean con `transform: scaleX(-1)`. Los iconos que no deben reflejarse están excluidos por diseño. Además, un pequeño grupo de variantes específicas para RTL, como `list-check-rtl`, cubre los casos en que voltear no basta. Aunque nunca publiques en árabe o hebreo, este detalle dice mucho del cuidado con que se construyó el set. ### Que tu agente de código la use bien El proyecto incluye una agent skill oficial para Claude Code, Cursor, Copilot y herramientas similares: ```bash pnpm dlx skills add andrsrxn/icons --skill andrsrxn-icons ``` También puedes copiar la carpeta `skills/andrsrxn-icons` del repositorio en `.agents/skills/`. Con la skill cargada, tu agente conoce las reglas de nombres y las rutas de importación en lugar de inventar nombres de iconos. Ese es el fallo habitual cuando un asistente usa una librería de iconos que nunca ha visto. ## ¿Es una alternativa a Phosphor Icons o Lucide? Para una aplicación existente, probablemente no vale la pena migrar, pero para un proyecto nuevo que busca un aspecto propio merece una mirada. Encaja bien si trabajas con React 19 y ESM, si quieres duotone sin pagar por él, o si necesitas banderas y RTL desde la misma fuente. Hay también un plugin de Figma, así que diseño y desarrollo pueden trabajar con el mismo set. No encaja si dependes de React 18, de CommonJS o de otro framework. Al momento de publicar esta nota, otros frameworks figuraban como “próximamente”, pero no estaban disponibles. Tampoco es para ti si necesitas un proyecto con equipo detrás: lo mantiene una sola persona, sin una política de soporte declarada, y no acepta contribuciones de iconos, solo solicitudes mediante issues de GitHub. * * * **¿Y tú?** ¿Qué miras primero al elegir una librería de iconos: el estilo, el peso en el bundle o la licencia? _Poll ([view on site](https://www.yodev.dev/t/iconos-gratis-para-react-2-500-duotone-y-250-banderas-en-un-solo-paquete-mit/5816/1))_ Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí. Relacionado: [Neobrutalism Components: componentes neobrutalistas gratis para React y shadcn, ahora sobre Base UI](https://www.yodev.dev/t/neobrutalism-components-componentes-neobrutalistas-gratis-para-react-y-shadcn-ahora-sobre-base-ui/5448)