@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.
¿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
filledsolo 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, conrole="img"y el código del país comoaria-label. Los continentes llevan el prefijoC, comoIconFlagCAFpara África eIconFlagCNApara 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:
pnpm add @andrsrxn/icons
La documentación también recomienda, de forma opcional, un pequeño estilo global para los iconos de interfaz:
.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:
import { IconRocket } from '@andrsrxn/icons'
import { IconFlagGT } from '@andrsrxn/icons/flags'
export function App() {
return (
<div className='flex items-center justify-center gap-2 h-dvh w-full'>
<IconRocket />
<IconFlagGT />
</div>
)
}
El tamaño, el color y el trazo funcionan como props o como clases de Tailwind:
<IconRocket size={80} />
<IconRocket color='#0047CC' />
<IconRocket className='text-blue-500' />
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:
<IconFlagGT width={80} />
<IconFlagGT size={80} cover />
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:
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 (
<ul>
{paises.map(({ codigo, nombre, Bandera }) => (
<li key={codigo} className='flex items-center gap-2'>
<Bandera width={24} aria-hidden />
<span>{nombre}</span>
</li>
))}
</ul>
)
}
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:
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:
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?
- Lucide
- Phosphor Icons
- React Icons (react-icons)
- Prefiero otra opción (cuéntanos cuál)
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