@andrsrxn/icons 5.0.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,174 @@
 # @andrsrxn/icons
 
+## 7.0.0
+
+### Major Changes
+
+- [`98a5481`](https://github.com/andrsrxn/icons/commit/98a54816c34017d4d6d7424eda38d0df8e658c6c) Thanks [@andrsrxn](https://github.com/andrsrxn)! - **Renamed the base CSS classes and `data-slot` prefix.**
+
+  - UI icons: `.ui-icon` → `.icon-ui`
+  - Flag icons: `.ui-flag` → `.icon-flag`
+  - `data-slot` on every icon now uses the new class prefix followed by the icon name
+    (e.g. `ui-icon-rocket` → `icon-ui-rocket`, `ui-flag-us` → `icon-flag-us`)
+
+  Any CSS selectors, including the RTL auto-mirroring rules, targeting the old class names
+  or `data-slot` values need updating.
+
+  **Migration:**
+
+  ```diff
+  - .ui-icon { ... }
+  + .icon-ui { ... }
+
+  - .ui-flag { ... }
+  + .icon-flag { ... }
+
+  - [data-slot='ui-icon-rocket'] { ... }
+  + [data-slot='icon-ui-rocket'] { ... }
+  ```
+
+- [`98a5481`](https://github.com/andrsrxn/icons/commit/98a54816c34017d4d6d7424eda38d0df8e658c6c) Thanks [@andrsrxn](https://github.com/andrsrxn)! - **Renamed the following icons:**
+
+  - `dots-horizontal` to `more-h`
+  - `dots-vertical` to `more-v`
+  - `cash` to `money`
+  - `check-seal` to `check-badge`
+  - `arrows-triangle` to `recycle`
+  - `announcement` to `megaphone`
+  - `chat` to `message`
+  - `chat-plus` to `message-plus`
+  - `chat-minus` to `message-minus`
+  - `chats` to `messages`
+  - `chat-off` to `message-off`
+  - `chat-x` to `message-x`
+  - `arrow-bottom-left` to `arrow-down-left`
+  - `arrow-bottom-right` to `arrow-down-right`
+
+  **Migration:**
+
+  ```diff
+  - import { IconDotsHorizontal, IconCash, IconCheckSeal } from '@andrsrxn/icons'
+  + import { IconMoreHorizontal, IconMoney, IconCheckBadge } from '@andrsrxn/icons'
+  ```
+
+- [`98a5481`](https://github.com/andrsrxn/icons/commit/98a54816c34017d4d6d7424eda38d0df8e658c6c) Thanks [@andrsrxn](https://github.com/andrsrxn)! - **Reworked the RTL-aware icon system with three distinct categories.**
+
+  **1. Opt-in `-start`/`-end` icons**: Auto-mirrored via `[dir=rtl]`, replacing their
+  former literal `-left`/`-right` counterparts. Full list: `arrow-start`,`arrow-end`,`arrow-down-start`,`arrow-down-end`,`arrow-up-start`,`arrow-up-end`,`arrows-start-end`,
+  `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-start`,
+  `panel-end-filled`,`panel-end-open-filled`,`panel-end-open`,`panel-end`,`panel-start-filled`,`panel-start-open-filled`,`panel-start-open`,`panel-start`,
+  `slides-start`,`slides-end`,
+
+  **2. RTL-exclusive icons**: Not mirrored via CSS transform at all, since flipping
+  their content (numerals, checkmarks) would render it incorrectly. These are separate,
+  dedicated components used only in RTL contexts: `seek-backward-rtl`,
+  `seek-forward-rtl`, `list-ordered-rtl`, `list-check-rtl`.
+
+  **3. Opt-out icons** Unchanged, still auto-mirrored by default via `[dir=rtl]`,
+  no action needed, but increased the list: `list-asterisk`,`list-unordered`,`logs`,`app-window`,`notes`,`article`,`receipt`,`text-indent`,`text-outdent`,`text-initial`,`text-items`,`text-line-height`,
+  `key-backspace`,`key-enter`,`key-tab`,
+  `external-link`,`chevron-first`,`skip-backward`,`chevron-last`,`skip-forward`,`redo`,`undo`.
+
+  **Migration:**
+
+  ```diff
+  - import { IconChevronLeft, IconChevronRight } from '@andrsrxn/icons'
+  + import { IconChevronStart, IconChevronEnd } from '@andrsrxn/icons'
+
+  - <IconSeekBackward />  {/* used inside an RTL context */}
+  + <IconSeekBackwardRtl />
+  ```
+
+  **CSS import restructuring.** RTL mirroring rules have moved out of the base
+  stylesheet into a separate, opt-in entry point because based styles were removed. If you use any RTL-aware icon (the `-start`/`-end` set, or the opt-out icons like `text-indent`), you need to import `@andrsrxn/icons/rtl.css`.
+
+  ```diff
+  - import '@andrsrxn/icons/styles.css'
+  + import '@andrsrxn/icons/rtl.css'
+  ```
+
+- [`98a5481`](https://github.com/andrsrxn/icons/commit/98a54816c34017d4d6d7424eda38d0df8e658c6c) Thanks [@andrsrxn](https://github.com/andrsrxn)! - **Reduced the default viewBox padding on UI icons from 2px to 1px.**
+
+  This changes every icon's proportions slightly within its viewBox, making artwork appear marginally larger at a given size. There's no prop or API change required but layouts with tight pixel alignment around icons should be visually re-checked after upgrading.
+
+### Minor Changes
+
+- [`98a5481`](https://github.com/andrsrxn/icons/commit/98a54816c34017d4d6d7424eda38d0df8e658c6c) Thanks [@andrsrxn](https://github.com/andrsrxn)! - Added new UI icons: `3d`, `agent`, `alphabet`, `arrow-down-dot`, `arrow-up-dot`, `asterisk-circle`, `asterisk-square`, `book-open`, `book-open-content`, `broccoli`, `calculator`, `calendar-edit`, `calendar-warning`, `camera-flip`, `camera-minus`, `camera-plus`, `chevron-first`, `chevron-last`, `circle-dashed`, `combine`, `crayon`, `crayon-circle`, `credit-card`, `credit-card-check`, `credit-card-minus`, `credit-card-plus`, `credit-card-x`, `currency-ang`, `currency-brl`, `currency-crc`, `currency-cup`, `currency-hnl`, `currency-krw`, `currency-nio`, `currency-nok`, `currency-npr`, `currency-pab`, `currency-pen`, `currency-pln`, `currency-sar`, `currency-sos`, `currency-thb`, `currency-try`, `currency-usd`, `currency-uyu`, `currency-ves`, `currency-zar`, `dot`, `dot-circle`, `duplicate`, `eclipse`, `ear-off`, `engine`, `file-content`, `file-edit`, `file-in`, `file-move`, `file-out`, `file-warning`, `file-music`, `flatten`, `folder-code`, `folder-download`, `folder-edit`, `folder-in`, `folder-move`, `folder-music`, `folder-out`, `folder-settings`, `folder-warning`, `ghost`, `handshake`, `heart-handshake`, `highlighter`, `highlighter-circle`, `invoice`, `key-tab`, `label`, `link-connect`, `link-connect-off`, `list-clock`, `lyrics`, `mail-check`, `mail-edit`, `mail-heart`, `mail-in`, `mail-minus`, `mail-move`, `mail-out`, `mail-plus`, `mail-prohibit`, `mail-settings`, `mail-star`, `mail-x`, `map-pin-check`, `map-pin-minus`, `map-pin-x`, `marker`, `marker-circle`, `message-channel`, `message-content`, `message-download`, `message-warning`, `mirror`, `mirror-round`, `money-check`, `money-in`, `money-minus`, `money-out`, `money-plus`, `money-x`, `music-note-zzz`, `numbers`, `panel-bottom-filled`, `panel-bottom-open-filled`, `panel-left-filled`, `panel-left-open-filled`, `panel-right-filled`, `panel-right-open-filled`, `panel-right-open-filled`, `panel-top-filled`, `panel-top-open-filled`, `panels-bottom-filled`, `panels-left-filled`, `panels-right-filled`, `panels-top-filled`, `paste`, `pen`, `pen-circle`, `pen-nib`, `pen-nib-circle`, `pencil-circle`, `piggy-bank`, `pipeline`, `play-circle`, `play-square`, `quotes-down`, `quotes-up`, `rainbow`, `rectangle`, `repeat-off`, `repost-check`, `reply`, `reply-all`, `search-code`, `share-network`, `shield-warning`, `skip-backward`, `skip-forward`, `sound-wave-off`, `square`, `step-backward`, `step-forward`, `story-heart`, `text-decrease-size`, `text-increase-size`, `text-path`, `text-read-aloud`, `usb-c-port`, `user-edit`, `user-in`, `user-move`, `user-out`, `video-minus`, `video-plus`, `virus`, `vpn`, `webhook`
+
+### Patch Changes
+
+- [`98a5481`](https://github.com/andrsrxn/icons/commit/98a54816c34017d4d6d7424eda38d0df8e658c6c) Thanks [@andrsrxn](https://github.com/andrsrxn)! - Consolidated `strokeWidth`, `stroke-linecap`, and `stroke-linejoin` onto each icon's root `<svg>` element instead of repeating them per path/shape, reducing output size and letting the consumers change it once per icon from the root. Visual rendering and the `strokeWidth` prop's behavior are unchanged.
+
+- [`98a5481`](https://github.com/andrsrxn/icons/commit/98a54816c34017d4d6d7424eda38d0df8e658c6c) Thanks [@andrsrxn](https://github.com/andrsrxn)! - Fixed accessibility labeling so `title` and `aria-label` no longer both apply at once. setting `aria-label` alone applies instead of `title` attribute, and add `role=img` on UI icons.
+
+  On the other hand, flag icons only have by default `aria-label` with the uppercase country code; setting `aria-hidden` make them decorative and not informational as intended.
+
+## 6.0.0
+
+### Major Changes
+
+- [`7624e2a`](https://github.com/andrsrxn/icons/commit/7624e2ae8515e5594c2447f5a308762b48407242) Thanks [@andrsrxn](https://github.com/andrsrxn)! - **Rebuilt all UI icons using strokes and shapes instead of flattened paths.**
+
+  Every UI icon's underlying SVG markup has changed. Previous versions shipped fully flattened path data; icons are now built from actual stroke and shape primitives instead. This reduces the size of each icon and lays the groundwork for animating individual strokes in the future.
+
+  **Renamed icons.** A number of icons were renamed to fix misspellings and to better reflect their intended meaning (e.g. `arrow-expand` to `expand`). Full
+  list of renames:
+
+  - `olimpyc-torch` to `olympic-torch`
+  - `vehicule-battery` to `vehicle-battery`
+  - `celcius` to `celsius`
+  - `resfresh` to `refresh`
+  - `trophie` to `trophy`
+  - `text-lowecase` to ``text-lowercase`
+  - `suffle` to ``shuffle`
+  - `phone-outcomming` to ``phone-outgoing`
+  - `text-aa` to ``text-case-sensitive`
+  - `text-clean` to ``text-clear`
+  - `substract` to ``subtract`
+  - `arrow-expand` to `expand`
+  - `arrow-contract` to `contract`
+  - `collapse` to `list-collapse`
+
+  **Removed `IconFaceId`.** This depicted Apple's Face ID feature and was removed for the same trademark reasons as the Brand icon removal.
+
+  **`data-slot` values changed.** UI icons now use `data-slot='ui-icon-{name}'` (previously just `{name}`). Flag icons now also carry a `data-slot`, using `data-slot='ui-flag-{name}'`. Update any selectors targeting these directly.
+
+  **Flag icon class name changed** from `ui-icon-flag` to `ui-flag`. Update any CSS targeting `.ui-icon-flag`.
+
+  **Migration:**
+
+  ```diff
+  - import { IconArrowExpand } from '@andrsrxn/icons'
+  + import { IconExpand } from '@andrsrxn/icons'
+
+  - import { IconFaceId } from '@andrsrxn/icons'
+  + import { IconFaceScan } from '@andrsrxn/icons' // alternative with the same meaning
+
+  - [data-slot='rocket'] { ... }
+  + [data-slot='ui-icon-rocket'] { ... }
+
+  - .ui-icon-flag { ... }
+  + .ui-flag { ... }
+  ```
+
+### Minor Changes
+
+- [`7624e2a`](https://github.com/andrsrxn/icons/commit/7624e2ae8515e5594c2447f5a308762b48407242) Thanks [@andrsrxn](https://github.com/andrsrxn)! - **Added new UI icons.**
+
+  More than a 100 icons were added, including new variants for current icons and specific use cases.
+
+  **Added a `strokeWidth` prop** to control an icon's stroke width, either
+  individually per icon or globally via `.ui-icon * { stroke-width: ... }`.
+  Changing it from the default is not recommended; since icons combine
+  strokes with filled shapes, altering `stroke-width` can produce unexpected
+  results where the stroke and fill no longer align cleanly.
+
+  **Support RTL for new icons**
+
+  Icon such as swipe-right/left, panels-right/left, keyboard keys, and more, now are RTL aware.
+
 ## 5.0.0
 
 ### Major Changes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 andrsrxn
+Copyright (c) 2026 Andrés Raxón (andrsrxn)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,37 +1,38 @@
-<img src="https://res.cloudinary.com/dq5nfyajn/image/upload/v1786396828/symbol_bo4gxs.svg" alt="andrsrxn/ui symbol" width="64" height="64" />
+<img src="./assets/symbol.svg" alt="andrsrxn/icons symbol" width="64" height="64" />
 
 # andrsrxn/icons
 
-[![npm version](https://img.shields.io/npm/v/@andrsrxn/icons)](https://www.npmjs.com/package/@andrsrxn/icons)
-[![Dependency count](https://img.shields.io/badge/dependency%20count-0-blue)](https://www.npmjs.com/package/@andrsrxn/icons)
-[![npm downloads](https://img.shields.io/npm/dm/@andrsrxn/icons)](https://www.npmjs.com/package/@andrsrxn/icons)
-[![License](https://img.shields.io/github/license/andrsrxn/icons)](https://github.com/andrsrxn/icons)
-[![CI](https://github.com/andrsrxn/icons/actions/workflows/ci.yml/badge.svg)](https://github.com/andrsrxn/icons/actions/workflows/ci.yml)
-[![CodeQL](https://github.com/andrsrxn/icons/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/andrsrxn/icons/actions/workflows/github-code-scanning/codeql)
-[![Linted with Biome](https://img.shields.io/badge/Linted_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev)
+React icon library with 1,000+ duotone icons and 250+ flag icons. Smooth, RTL-aware, and optimized SVGs.
 
-React icon library with 800+ duotone icons and 250+ flag icons. Fully typed, RTL-aware, and optimized SVGs.
-
-![Icons banner with logo in the center](https://res.cloudinary.com/dq5nfyajn/image/upload/v1786409382/banner-og_ostf0x.webp)
+![Icons banner with logo in the center](./assets/banner-github.webp)
 
 ## Overview
 
-This library was built to serve as the icon foundation for **[@andrsrxn/ui](https://ui.andrsrxn.com)**, an upcoming open-source, opinionated Design System and Component Library aimed at enterprise-grade products.
+**andrsrxn/icons** is a React icon library with 1,000+ duotone icons and 250+ flag icons. Smooth, RTL-aware, and optimized SVGs.
+
+This library was built to serve as the icon foundation for `andrsrxn/ui`, an upcoming open-source, opinionated Design System and Component Library aimed at enterprise-grade products.
 
-While `@andrsrxn/icons` is tightly coupled to that vision, it is intentionally published as a **standalone package**. This keeps it lightweight, independently versioned, and freely usable by anyone (regardless of whether they adopt `@andrsrxn/ui`). Icon documentation will be available at [ui.andrsrxn.com/icons](https://ui.andrsrxn.com/icons) once the UI package is released.
+While `andrsrxn/icons` is tightly coupled to that vision, it is intentionally published as a **standalone package**. This keeps it lightweight, independently versioned, and freely usable by anyone.
 
 ### 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](https://phosphoricons.com/) does include free duotone variants, but its implementation applies a duotone layer to every icon unconditionally, even purely geometric ones like arrows or plus signs that have no meaningful background shape. This results in unnecessary visual noise and icons that feel semantically inconsistent.
+Most libraries offer only outline or solid variants. [Phosphor Icons](https://phosphoricons.com/) 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:
+`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.
 
+## Categories
+
+- **UI**: 1,000+ functional icons for apps, each with its own preview image. (aspect ratio 1:1)
+- **Flags**: 250+ 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 `title` included. (aspect ratio 3:2)
+
+> **Notice**: We do not provide any brand or logo icons, as we are purely an icon library. If you need such icons, we recommend checking out [SVGL](https://svgl.app) or [Simple Icons](https://simpleicons.org/).
+
 ## Requirements
 
 You only need to be using `react` and `react-dom` version 19.
@@ -40,21 +41,12 @@ You only need to be using `react` and `react-dom` version 19.
 
 ## Installation
 
+Execute the following command:
+
 ```bash
 pnpm add @andrsrxn/icons
 ```
 
-Then add the minimal CSS to the root of your project
-
-```tsx
-import '@andrsrxn/icons/styles.css'
-```
-
-## Categories
-
-- **UI**: 800+ functional icons for apps, each with its own preview image. (aspect ratio 1:1)
-- **Flags**: 250+ simple and minimal country flags, named with ISO 3166-1 alpha-2 code (`IconFlagUS`, `IconFlagMX`), 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 `title` included. (aspect ratio 3:2)
-
 ## Usage
 
 ### Global import
@@ -63,13 +55,13 @@ Still tree-shakable, it will only import the icons you use.
 
 ```tsx
 import { IconRocket } from '@andrsrxn/icons'
-import { IconFlagUS } from '@andrsrxn/icons/flags'
+import { IconFlagGT } from '@andrsrxn/icons/flags'
 
 export function App() {
   return (
-    <div className='flex h-screen w-full items-center justify-center'>
+    <div className='flex items-center justify-center gap-2 h-dvh w-full'>
       <IconRocket />
-      <IconFlagUS />
+      <IconFlagGT />
     </div>
   )
 }
@@ -81,120 +73,222 @@ Explicitly importing icons is also supported, giving you more granular control o
 
 ```tsx
 import { IconRocket } from '@andrsrxn/icons/rocket'
-import { IconFlagUS } from '@andrsrxn/icons/flags/us'
+import { IconFlagGT } from '@andrsrxn/icons/flags/us'
 
 export function App() {
   return (
-    <div className='flex h-screen w-full items-center justify-center'>
+    <div className='flex items-center justify-center gap-2 h-dvh w-full'>
       <IconRocket />
-      <IconFlagUS />
+      <IconFlagGT />
     </div>
   )
 }
 ```
 
+> **Best practices**: Avoid importing all the icons at once from the root of the library, that is not tree-shakable and will increase the bundle size of your application.
+
 ## RTL support
 
-The following UI icons automatically detect the `dir` attribute on the `html` or the closest parent element and add the `transform: scaleX(-1)` CSS property to the SVG element:
+To automatically handle icon rotation on RTL import the following CSS in the root of your project:
+
+```tsx
+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:
+
+[See all rtl-aware icons](./src/styles.css)
 
-- arrow-end
-- arrow-start
-- arrow-up-end
-- arrow-up-start
-- chevron-end
-- chevron-start
-- chevron-end-double
-- chevron-start-double
+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:
+
+```css
+[dir='rtl'] [data-slot='icon-ui-arrow-start'] {
+  transform: scaleX(1);
+}
+```
+
+### Exceptions
+
+These icons are exclusive for RTL, as they cannot be just flipped, but adapted:
+
+- `IconListCheckRtl`
+- `IconListOrderedRtl`
+- `IconSeekBackwardsRtl`
+- `IconSeekForwardRtl`
+
+## 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'`:
+
+```tsx
+<IconArrowStart aria-label='Back' onClick={() => back()} />
+```
+
+> **Best practices**: This is not a reccomended pattern, use it only when strictly required.
+
+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:
+
+```tsx
+<IconFlagGT aria-hidden />
+```
 
 ## Naming
 
 All of the categories have an `Icon` prefix to differentiate them from other components and be easily importable.
 
-## Styling
+The icon names are based on the object it represents, using kebab-case for the file names and PascalCase for the component names.
 
-All of the icons have a specific className to style them globally or individualy
+There are some exceptions on widely accepted names, such as `IconSave` instead of `IconFloppyDisk` or `IconExternalLink` instead of `IconSquareArrowUpRight`.
 
-- **UI icons**: `ui-icon`
-- **Flag icons**: `flag-icon`
+## Styling
 
-Or you can use the custom props as the next examples:
+All of the icons have a specific className to style them globally:
 
-### Size
+- **UI icons**: `icon-ui`
+- **Flag icons**: `icon-flag`
 
-> **Note:** If you want to keep proportions on Flag icons, only set the `width`.
+```css
+/* Apply styles to all icons */
+.icon-ui {
+  stroke-width: 2px;
+}
+```
 
-1. Size prop
+```css
+/* Recommended global styles */
+.icon-ui {
+  flex-shrink: 0;
+  pointer-events: none;
+}
+```
 
-```tsx
-<IconRocket size={48} />
+Also, the icons include a `data-slot` with its specific name, for example:
 
-// Keep 3:2 proportions
-<IconFlagUS width={48} />
+- **rocket**: `data-slot='icon-ui-rocket'`
+- **us**: `data-slot='icon-flag-us'`
 
-// Square proportions
-<IconFlagUS size={48} />
+```css
+/* Target a specific icon */
+[data-slot='icon-ui-rocket'] {
+  color: #f00;
+  stroke-width: 1px;
+}
 ```
 
-2. Classname
+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`.
 
 ```tsx
+// Set the size with size prop
+<IconRocket size={80} />
+
+// Or with className
 <IconRocket className='size-6' />
+```
 
+```tsx
 // Keep 3:2 proportions
-<IconFlagUS className='w-6' />
+<IconFlagGT width={80} />
+<IconFlagGT className='w-16' />
+```
 
+```tsx
 // Square proportions
-<IconFlagUS className='size-6' />
+<IconFlagGT size={80} />
+<IconFlagGT className='size-20' />
+```
 
+```tsx
 // To fill the entire square
-<IconFlagUS className='size-6 object-cover' />
+<IconFlagGT size={80} preserveAspectRatio='xMidYMid slice' />
+<IconFlagGT className='size-20' preserveAspectRatio='xMidYMid slice' />
 ```
 
 ### Color
 
 By default, the UI icons have `currentColor` set as fill and stroke value.
 
-1. Color prop
-
 ```tsx
-<IconRocket color='gray' />
-```
+// Use color prop
+<IconRocket color='#0047CC' />
 
-2. Classname
-
-```tsx
-<IconRocket className='text-blue-500 dark:text-red-500' />
-<IconFlagUS className='text-blue-500 dark:text-red-500' />
+// 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 some cases.
+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, add `strokeWidth` prop to each icon.
+
+```tsx
+// Use strokeWidth prop
+<IconRocket strokeWidth={2} />
+
+// Or use className
+<IconRocket className='stroke-2' />
+```
 
-## Types
+## TypeScript
 
 We expose scoped types for each category:
 
-```typescript
+```tsx
 import type { Icon, IconProps } from '@andrsrxn/icons/types'
 import type { FlagIcon, FlagIconProps } from '@andrsrxn/icons/flags/types'
 ```
 
-- **Icon**, **FlagIcon**: The SVG element
+- **Icon**, **FlagIcon**: SVG element
 - **IconProps**, **FlagIconProps**: Icon component props from SVG and custom props
 
-> **Note**: Named this way to avoid conficts with some Icon components names, such as `IconFlag` from UI icons.
+> **Note**: Types are named this way to avoid conficts with some Icon components names, such as IconFlag from UI icons.
+
+### Props
+
+#### UI icon props
+
+| Props         | Type               | Default                 | Description                                 |
+| ------------- | ------------------ | ----------------------- | ------------------------------------------- |
+| `size`        | `number \| string` | `24`                    | Size in pixels or any valid css length unit |
+| `strokeWidth` | `number`           | `1.5`                   | Stroke width in pixels                      |
+| `color`       | `string`           | `currentColor`          | Stroke and fill colors                      |
+| `aria-label`  | `string`           | `undefined`             | Removes aria-hidden and add role of img     |
+| `className`   | `string`           | `icon-ui`               | Class to style globally the icon            |
+| `data-slot`   | `string`           | `icon-ui-{{icon-name}}` | Specific attribute to identify the icon     |
+
+#### Flag icon props
+
+| Props         | Type               | Default                   | Description                                 |
+| ------------- | ------------------ | ------------------------- | ------------------------------------------- |
+| `size`        | `number \| string` | `24`                      | Size in pixels or any valid css length unit |
+| `color`       | `string`           | `currentColor`            | Stroke and fill colors                      |
+| `role`        | `string`           | `img`                     | Treated as image                            |
+| `aria-label`  | `string`           | `{{flag-name}}`           | Uppercase flag name (Country code)          |
+| `className`   | `string`           | `icon-flag`               | Class to style globally the icon            |
+| `data-slot`   | `string`           | `icon-flag-{{flag-name}}` | Specific attribute to identify the icon     |
+| `aria-hidden` | `boolean`          | `false`                   | Set true to hide it from screen readers     |
+
+> **Note**: Types are named this way to avoid conficts with some Icon components names, such as `IconFlag` from UI icons.
 
 ## Contributing
 
-We currently do not accept contributions for new icons, but we appreciate suggestions and icon requests through GitHub issues.
+We currently do not accept contributions for new icons, but we appreciate suggestions and icon requests through [GitHub issues](https://github.com/andrsrxn/icons/issues).
 
 ## Support
 
-If this project helps you, you can support its development through:
+If this project is useful to you, consider supporting its development through:
 
-- Credit or debit card: https://app.recurrente.com/s/andrsrxn/pagar
-- PayPal: https://paypal.me/andrsrxn
+- [GitHub Sponsors](https://github.com/sponsors/andrsrxn)
+- [Credit/Debit card](https://app.recurrente.com/s/andrsrxn/pagar)
+- [PayPal](https://paypal.me/andrsrxn)
 
 ## Inspiration
 
@@ -205,16 +299,8 @@ All of the icons were made by scratch on Figma but inspired on the following ico
 
 ## Credits
 
-The flag icons are adapted from [FlagKit](https://github.com/madebybowtie/FlagKit) by [Bowtie](https://github.com/madebybowtie), 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](THIRD-PARTY-LICENSES.md) for the full license text.
-
-## Next steps
-
-- Add more specific UI icons
-- Keep optimizing the icon library size
-- Consider adapting the icons to other frameworks (Svelte, Vue, Angular, etc.)
+The flag icons are adapted from [FlagKit](https://github.com/madebybowtie/FlagKit) by [Bowtie](https://github.com/madebybowtie), 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](THIRD-PARTY-LICENSES.md) for the full license text.
 
 ## License
 
-All icons are free to use, personal or commercial use allowed. [MIT License](LICENSE) - Copyright 2026 andrsrxn.
+All icons are free; personal or commercial use is allowed under [MIT License](LICENSE) - Copyright 2026 Andrés Raxón (andrsrxn).

package/assets/symbol.svg

@@ -0,0 +1,12 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_125_339)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8404 243.768C18.8404 137.736 18.8404 84.7198 51.7803 51.7799C84.7202 18.84 137.736 18.84 243.768 18.84H356.232C462.264 18.84 515.28 18.84 548.22 51.7799C581.16 84.7198 581.16 137.736 581.16 243.768V356.232C581.16 462.264 581.16 515.279 548.22 548.219C515.28 581.159 462.264 581.159 356.232 581.159H243.768C137.736 581.159 84.7202 581.159 51.7803 548.219C18.8404 515.279 18.8404 462.264 18.8404 356.232V243.768ZM304.889 152.973L277.772 243.768L368.652 460.061H432.415L304.889 152.973Z" fill="#C5D4F4"/>
+<path d="M430.154 439.778H368.027L293.592 228.288L318.208 160.222L430.154 439.778Z" fill="white"/>
+<path d="M562.41 243.768C562.41 190.222 562.37 151.948 558.46 122.863C554.622 94.3163 547.367 77.4438 534.961 65.0383C522.556 52.6328 505.683 45.3782 477.137 41.5402C448.052 37.6298 409.778 37.59 356.232 37.59H243.768C190.222 37.59 151.949 37.6298 122.863 41.5402C94.3167 45.3782 77.4442 52.6328 65.0387 65.0383C52.6332 77.4438 45.3786 94.3163 41.5406 122.863C37.6301 151.948 37.5904 190.222 37.5904 243.768V356.232C37.5904 409.778 37.6301 448.051 41.5406 477.137C45.3786 505.683 52.6332 522.556 65.0387 534.961C77.4442 547.367 94.3167 554.621 122.863 558.459C151.949 562.37 190.222 562.409 243.768 562.409H356.232C409.778 562.409 448.052 562.37 477.137 558.459C505.683 554.621 522.556 547.367 534.961 534.961C547.367 522.556 554.622 505.683 558.46 477.137C562.37 448.051 562.41 409.778 562.41 356.232V243.768ZM314.554 120.472C322.028 120.535 329.055 125.094 331.901 132.494L447.602 433.25H467.23C477.586 433.25 485.98 441.645 485.98 452C485.98 462.356 477.586 470.75 467.23 470.75H336.009C325.653 470.75 317.259 462.356 317.259 452C317.259 441.645 325.654 433.25 336.009 433.25H348.633L284.653 268.409L221.239 433.25H248.252C258.607 433.25 267.002 441.645 267.002 452C267.002 462.356 258.607 470.75 248.252 470.75H145.358C135.003 470.75 126.608 462.356 126.608 452C126.609 441.645 135.003 433.25 145.358 433.25H181.061L296.761 132.494C299.607 125.094 306.634 120.535 314.108 120.472H314.554ZM304.677 216.359L388.858 433.25H407.423L314.331 191.263L304.677 216.359ZM599.91 356.232C599.91 408.717 599.949 449.968 595.625 482.133C591.228 514.838 582.012 540.943 561.478 561.478C540.944 582.012 514.838 591.227 482.133 595.624C449.968 599.949 408.718 599.909 356.232 599.909H243.768C191.282 599.909 150.032 599.949 117.867 595.624C85.1622 591.227 59.0564 582.012 38.522 561.478C17.9877 540.943 8.77259 514.838 4.37556 482.133C0.0511016 449.968 0.0904083 408.717 0.0904083 356.232V243.768C0.0904083 191.282 0.0511159 150.032 4.37556 117.866C8.77259 85.1618 17.9877 59.056 38.522 38.5217C59.0564 17.9873 85.1622 8.77222 117.867 4.3752C150.032 0.050746 191.282 0.0900394 243.768 0.0900394H356.232C408.718 0.0900394 449.968 0.0507326 482.133 4.3752C514.838 8.77222 540.944 17.9873 561.478 38.5217C582.012 59.056 591.228 85.1618 595.625 117.866C599.949 150.032 599.91 191.282 599.91 243.768V356.232Z" fill="#0047CC"/>
+</g>
+<defs>
+<clipPath id="clip0_125_339">
+<rect width="600" height="600" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/dist/flags/ad.d.ts

@@ -1,5 +1,5 @@
 import { FlagIcon } from "./types.js";
-//#region src/react/flags/ad.d.ts
+//#region src/flags/ad.d.ts
 /**
   * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMjEgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsbD0nd2hpdGUnLz4KICAgIDwhLS0gR2VuZXJhdG9yOiBza2V0Y2h0b29sIDQ2ICg0NDQyMykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+QUQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGRkZGRiIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRjBGMEYwIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIiBpZD0ibGluZWFyR3JhZGllbnQtMiI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMxNTM3RDEiIG9mZnNldD0iMCUiPjwvc3RvcD4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzA1MjJBNSIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTMiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRUEzMDU4IiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNDRTE3M0UiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC00Ij4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGQ0YzQyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkVDQjJGIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBRCI+CiAgICAgICAgICAgIDxyZWN0IGlkPSJGbGFnQmFja2dyb3VuZCIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgeD0iMCIgeT0iMCIgd2lkdGg9IjIxIiBoZWlnaHQ9IjE1Ij48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJNYXNrLUNvcHkiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMikiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxNSI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iTWFzayIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0zKSIgeD0iMTAiIHk9IjAiIHdpZHRoPSIxMSIgaGVpZ2h0PSIxNSI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtNCkiIHg9IjciIHk9IjAiIHdpZHRoPSI3IiBoZWlnaHQ9IjE1Ij48L3JlY3Q+CiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJSZWN0YW5nbGUtMTM5LUNvcHkiIGZpbGw9IiNGRkVEQjEiIHBvaW50cz0iOS41IDYuNSAxMC41IDYuNSAxMC41IDcgOS41IDciPjwvcG9seWdvbj4KICAgICAgICAgICAgPHBhdGggZD0iTTkuNjY1MDI2NSw3Ljk1OTUyMDcgQzkuNjg5NjMwMzYsOC4yNTQ3NjcwMiA5Ljk1NjkzNzksOC41IDEwLjI1MjQ0MDgsOC41IEwxMC43NDc1NTkyLDguNSBDMTEuMDQyMjM4LDguNSAxMS4zMTA1Mjk1LDguMjUyODQ4OSAxMS4zMzQ5NzM1LDcuOTU5NTIwNyBMMTEuNDU2NjAwMiw2LjUgTDkuNTQzMzk5NzcsNi41IEw5LjY2NTAyNjUsNy45NTk1MjA3IFogTTkuMDQxMjgyNDIsNi40OTUzODg5OCBDOS4wMTg0ODI3Nyw2LjIyMTc5MzIgOS4yMTU3NTI2LDYgOS40OTUzODg5OCw2IEwxMS41MDQ2MTEsNiBDMTEuNzc4MjA2OCw2IDExLjk4MjAyMDYsNi4yMTU3NTI2IDExLjk1ODcxNzYsNi40OTUzODg5OCBMMTEuODMzMjQ2NCw4LjAwMTA0MzQ0IEMxMS43ODcyNzA3LDguNTUyNzUxOTEgMTEuMzAzMDUwMSw5IDEwLjc0NzU1OTIsOSBMMTAuMjUyNDQwOCw5IEM5LjY5ODgwODAxLDkgOS4yMTMxMTE2NCw4LjU1NzMzOTY3IDkuMTY2NzUzNjIsOC4wMDEwNDM0NCBMOS4wNDEyODI0Miw2LjQ5NTM4ODk4IFoiIGlkPSJSZWN0YW5nbGUtMTM3IiBmaWxsPSIjRDMyRTI4IiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlJlY3RhbmdsZS0xMzkiIGZpbGw9IiNEMzJFMjgiIHBvaW50cz0iOS41IDcgMTEuNSA3IDExLjUgNy41IDExIDcuNSAxMCA3LjUgOS41IDcuNSI+PC9wb2x5Z29uPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+)
   */