@andrsrxn/icons is a free icon library for React with over 2,500 duotone icons and more than 250 flags, MIT licensed and ready to install with a single command. Version 7.8.0 arrived on npm on October 27, 2026. It’s the work of a single designer and developer, Andrés Raxón, who drew each icon from scratch in Figma. It fills a specific gap: free icon sets are almost always outline or solid, and duotone usually sits behind a paywall.
What sets it apart from other React icon libraries?
Its design rule: the second tone appears only where it adds meaning. The project itself explains its motivation straightforwardly: there were no free duotone sets with the right style. Phosphor Icons does offer free duotone, but applies the extra layer to every icon without exception. @andrsrxn/icons follows three rules instead:
- Duotone by default on icons that have a real distinction between stroke and fill.
- Outline when it fits. Simple geometric icons like
+,/or×don’t get a decorative background layer. - Fill on demand. There’s a
filledvariant only for icons with a real active or selected state, like like, bookmark, or star.
The result is a coherent set within an interface, where duotone remains a signal and doesn’t become noise.
What does the package include?
The package has two groups:
- Interface icons: 1:1 ratio and decorative by default (
aria-hidden="true"). - Flags: 3:2 ratio and named with the ISO 3166-1 alpha-2 code (
IconFlagGT,IconFlagUS). They’re treated as informative images, withrole="img"and the country code asaria-label. Continents carry theCprefix, likeIconFlagCAFfor Africa andIconFlagCNAfor North America. The flags are adapted from FlagKit, by Bowtie, under MIT license, and the repository credits it as it should.
The npm package declares zero runtime dependencies. Version 7.8.0 was published from GitHub Actions via npm trusted publishing and carries SLSA provenance attestations. It’s a reassuring signal in a package maintained by a single person, at a time when attacks on the npm supply chain are routine.
What it doesn’t include: brand icons or logos. For that, the author recommends SVGL, theSVG, and Simple Icons.
What do you need before installing it?
You need React 19 or higher. It’s the declared peer dependency, so projects still on React 18 are out. Also, the package is ESM only. The documentation asks for Node 20.16.0, 22.19.0, or 24.0.0 onwards, and the "type": "module" field in your package.json.
One detail: at the time this note was published, the package’s own engines field declared node ^24, which is stricter than the documentation. Your package manager might show a warning with earlier Node versions.
How do you install and use it?
You install it with a command. The documentation shows pnpm, npm, yarn, and bun:
pnpm add @andrsrxn/icons
The documentation also recommends, optionally, a small global style for interface icons:
.icon-ui {
flex-shrink: 0;
pointer-events: none;
}
Then import what you need. Interface icons come from the package root and flags from /flags, and both paths support 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>
)
}
Size, color, and stroke work as props or as Tailwind classes:
<IconRocket size={80} />
<IconRocket color='#0047CC' />
<IconRocket className='text-blue-500' />
For flags, set only the width to maintain the 3:2 ratio. Add cover if you want a flag to fill a square:
<IconFlagGT width={80} />
<IconFlagGT size={80} cover />
The default stroke is 1.5. The author advises against changing it, because the icons were drawn for that thickness, though strokeWidth is available if you need it.
How do you use it in a real project?
There are three uses where the library really shines: flags, RTL, and code agents.
Flag icons for a country selector
It’s the obvious case for a product aimed at Latin America: a coherent flag set, with accessible labels included, for a country selector or a regional pricing table. Each flag is a component named after its ISO code, so you don’t need sprites or an image CDN:
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: 'Spain', Bandera: IconFlagES },
{ codigo: 'MX', nombre: 'Mexico', 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>
)
}
Since the country name already appears in text, the flag is marked with aria-hidden so the screen reader doesn’t announce it twice. It’s the pattern the documentation indicates for using a flag as a decorative element.
RTL support without flipping icons by hand
Import a stylesheet at the root of your application:
import '@andrsrxn/icons/rtl.css'
Directional icons, like arrow-start, chevron-end, and panel-start, then detect the dir attribute of their nearest parent element and flip with transform: scaleX(-1). Icons that shouldn’t be mirrored are excluded by design. Also, a small group of RTL-specific variants, like list-check-rtl, covers cases where flipping isn’t enough. Even if you never publish in Arabic or Hebrew, this detail says a lot about the care with which the set was built.
Make your code agent use it well
The project includes an official agent skill for Claude Code, Cursor, Copilot, and similar tools:
pnpm dlx skills add andrsrxn/icons --skill andrsrxn-icons
You can also copy the skills/andrsrxn-icons folder from the repository into .agents/skills/. With the skill loaded, your agent knows the naming rules and import paths instead of making up icon names. That’s the usual mistake when an assistant uses an icon library it’s never seen.
Is it an alternative to Phosphor Icons or Lucide?
For an existing application, it’s probably not worth migrating, but for a new project looking for its own look it deserves a glance.
It fits well if you work with React 19 and ESM, if you want duotone without paying for it, or if you need flags and RTL from the same source. There’s also a Figma plugin, so design and development can work with the same set.
It’s not for you if you rely on React 18, CommonJS, or another framework. At the time this note was published, other frameworks were listed as “coming soon”, but weren’t available. It’s also not for you if you need a project with a team behind it: it’s maintained by a single person, with no declared support policy, and doesn’t accept icon contributions, only feature requests via GitHub issues.
What about you? What do you look at first when choosing an icon library: style, bundle weight, or license?
- Lucide
- Phosphor Icons
- React Icons (react-icons)
- I prefer another option (tell us which)
Comment below or, if this article reached you by email, reply directly to the email: your reply is published here.
Related: Neobrutalism Components: free neobrutalist components for React and shadcn, now on Base UI