Documentation

Overview

andrsrxn/icons is a React icon library with 2,500+ duotone icons and 250+ flags. Smooth, RTL-aware, and optimized SVGs. An open-source icon library designed on Figma and built for modern React applications. The set is lightweight, visually consistent, and accessible.

Why another icon library?

The short answer: there are no free duotone icon sets with the right style.

Most libraries offer only outline or solid variants. Phosphor Icons does include free duotone variants, but its implementation applies a duotone layer to every icon unconditionally, this results in unnecessary visual noise and icons that feel semantically inconsistent.

andrsrxn/icons takes a more deliberate approach:

• Duotone by default: Icons that have a meaningful path/fill distinction are always duotone.
• Outline when appropriate: Simple geometric icons such as +, /, or × do not receive a decorative background layer that would only reduce clarity.
• Filled on demand: A filled variant is included only for icons that have a meaningful active or selected state, such as like, bookmark, or star, not as a blanket alternative style.

Groups

• UI: Functional icons for apps, each with its own preview image. (aspect ratio 1:1)
• Flags: Simple and minimal country flags, named with ISO 3166-1 alpha-2 code (IconFlagGT, IconFlagUS), the exceptions are IconFlagLGTB and continent flags, which have a C prefix (IconFlagCAF for Africa, IconFlagCNA for North America, and so on); treated as image assets with country code as aria-label included. (aspect ratio 3:2)

Requirements

You only need to be using react 19 or higher.

Installation

Execute the following command:

pnpm add @andrsrxn/icons

Add an optional but recommended global CSS styles to UI icons:

.icon-ui {
  flex-shrink: 0;
  pointer-events: none;
}

Agent skill

If you are using an AI coding assistant (such as Antigravity, Cursor, Copilot, or Claude Code), you can install the official agent skill into your project:

Automatic installation

pnpm dlx skills add andrsrxn/icons --skill andrsrxn-icons

Manual installation

Copy the skills/andrsrxn-icons directory into your project's .agents/skills/ directory.

.agents/
└── skills/
    └── andrsrxn-icons/
        ├── references/
        ├── README.md
        └── SKILL.md

Usage

Global import

Still tree-shakable, it will only import the icons you use.

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>
  )
}

Specific import

Explicitly importing icons is also supported, giving you more granular control over imports.

import { IconRocket } from '@andrsrxn/icons/rocket'
import { IconFlagGT } from '@andrsrxn/icons/flags/us'

export function App() {
  return (
    <div className='flex items-center justify-center gap-2 h-dvh w-full'>
      <IconRocket />
      <IconFlagGT />
    </div>
  )
}

RTL support

To automatically handle icon rotation on RTL import the following CSS in the root of your project:

import '@andrsrxn/icons/rtl.css'

The following UI icons automatically detect the dir attribute on the closest parent element and get flippled using the transform: scaleX(-1) CSS property:

Opt-in icons

• arrow-start

• arrow-end

• arrow-start-line

• arrow-start-from-line

• arrow-end-from-line

• arrow-end-line

• arrow-start-dot

• arrow-end-dot

• arrow-down-start

• arrow-down-end

• arrow-up-start

• arrow-up-end

• arrows-start-end

• arrows-start-from-line

• arrows-end-from-line

• arrow-end-circle

• arrow-up-end-circle

• arrow-up-start-circle

• arrow-down-end-circle

• arrow-end-circle

• arrow-up-end-circle

• arrow-up-start-circle

• arrow-down-end-circle

• arrow-down-start-circle

• arrow-start-circle

• chevron-start-circle

• chevron-end-circle

• chevron-start-double-circle

• chevron-end-double-circle

• border-end

• border-start

• bounce-end

• bounce-start

• chevron-start

• chevron-end

• chevron-start-double

• chevron-end-double

• text-align-start

• text-align-end

• text-centerline-end

• text-centerline-start

• text-firstline-start

• text-firstline-end

• panel-end-filled

• panel-end-open-filled

• panel-end-open

• panel-end

• panel-start-filled

• panel-start-open-filled

• panel-start-open

• panel-start

• panels-end-filled

• panels-end

• panels-start-filled

• panels-start

• slides-start

• slides-end

Opt-out icons

• list-asterisk

• clipboard-list

• list-unordered

• logs

• notes

• article

• license

• mail-letter

• relocate-start

• relocate-end

• flag-triangle-start

• flag-triangle-end

• menu-start

• menu-end

• timeline

• playlist-first

• playlist-last

• text-increase-spacing

• text-decrease-spacing

• text-wrap

• text-quote

• text-insert-image-up

• text-insert-image-down

• text-insert-image-center

• list-nested

• receipt

• text-indent

• text-outdent

• list-outdent

• list-indent

• text-initial

• text-items

• text-line-height

• key-backspace

• key-enter

• key-tab

• external-link

• chevron-first

• skip-backward

• skip-forward

• step-backward

• step-forward

• chevron-last

• redo

• undo

To opt-out of RTL on these icons and keep them as they are, add the Tailwind directive rtl:scale-x-100 or the quivalent in CSS:

[dir=rtl] [data-slot='icon-ui-arrow-start'] {
  transform: scaleX(1);
}

Try it out in the following demo:

Exceptions

These icons are exclusive for RTL, as they cannot be just flipped, but adapted:

• list-check-rtl

• list-ordered-rtl

• seek-backwards-rtl

• seek-forward-rtl

• seek-backward-five-rtl

• seek-forward-five-rtl

• seek-backward-fifteen-rtl

• seek-forward-fifteen-rtl

• seek-backward-thirty-rtl

• seek-forward-thirty-rtl

• seek-backward-sixty-rtl

• seek-forward-sixty-rtl

• list-todo-rtl

Accessibility

The UI icons are treated as decorative by default, using the aria-hidden='true' attribute.

If you want to use an icon as informative, you can add an aria-label, it automatically adds the role='img' and set the aria-hidden='false':

<IconArrowStart aria-label='Back' onClick={() => back()} />

On the other hand, Flag icons are treated as informative by default. They use the role='img' and aria-label with its flag name in uppercase.

If you want to treat them as decorative, use the aria-hidden attribute:

<IconFlagUs aria-hidden />

Naming

All of the groups have an Icon prefix to differentiate them from other components and be easily importable.

The icon names are based on the object it represents, using kebab-case for the file names and PascalCase for the component names.

There are some exceptions on widely known names, such as IconSave instead of IconFloppyDisk or IconSearch instead of IconMagnifyingGlass.

Styling

All of the icons have a specific className to style them globally:

• UI: icon-ui
• Flags: icon-flag

/* Apply styles to all icons */

.icon-ui {
  stroke-width: 2px;
}

Also, the icons include a data-slot with its specific name, for example:

• rocket: data-slot='icon-ui-rocket'
• us: data-slot='icon-flag-us'

/* Target a specific icon */

[data-slot='icon-ui-rocket'] {
  color: #f00;
  stroke-width: 1px;
}

Or you can use the custom props as the following examples.

Size

Note: If you want to keep proportions on Flag icons, only set the width.

// Set the size with size prop

<IconRocket size={80} />

// Or with className

<IconRocket className='size-6' />

// Keep 3:2 proportions

<IconFlagGT width={80} />
<IconFlagGT className='w-16' />

// Square proportions
            
<IconFlagGT size={80} />
<IconFlagGT className='size-20' />

// To fill the entire square

<IconFlagGT size={80} cover />
<IconFlagGT className='size-20' cover />

Color

By default, the UI icons have currentColor set as fill and stroke value.

// Use color prop

<IconRocket color='#0047CC' />

// Or use className

<IconRocket className='text-blue-500' />

Stroke width

It is not intended to change the stroke width of the icons (default 1.5). It could lead to inconsistent results in too thin or too thick strokes, losing the icon quality.

if you still need to change it, you can do it this way:

// Use strokeWidth prop

<IconRocket strokeWidth={2} />

// Or use className

<IconRocket className='stroke-2' />

TypeScript

We expose scoped types for each category:

import type { Icon, IconProps } from '@andrsrxn/icons/types'
import type { FlagIcon, FlagIconProps } from '@andrsrxn/icons/flags/types'

• Icon, FlagIcon: SVG element
• IconProps, FlagIconProps: Icon component props from SVG and custom props

Props

UI icon props

Flag icon props

Figma

If you want to use this library in Figma, visit the official Figma plugin or search for andrsrxn/icons in the Figma Community or in the Plugins & widgets panel.

Contributing

We currently do not accept contributions for new icons, but we appreciate suggestions and icon requests through GitHub issues.

Support

If this project is useful to you, consider supporting its development through:

Inspiration

All of the icons were made by scratch on Figma but inspired on the following icon libraries:

Phosphor IconsHugeicons

Credits

The flag icons are adapted from FlagKit by Bowtie, used under the MIT License (Copyright (c) 2016 Bowtie AB). Only the 3:2 rectangular flag versions were used as source material and converted into tsx components. See THIRD-PARTY-LICENSES.md for the full license text.

License

All icons are free; personal or commercial use is allowed under MIT License - Copyright 2026 Andrés Raxón (andrsrxn).