# UI/UX Icons

> 184 icons in 3 styles (Line, Duotone, Solid) and 3 weights (Light, Regular, Bold).
> Every icon uses a 24x24 viewBox with currentColor.

- Website: https://uiuxicons.com
- Packages: @uiuxicons/core, @uiuxicons/react, @uiuxicons/vue
- License: MIT

## Introduction

UI/UX Icons is a clean, consistent icon library for modern interfaces. Every icon comes in **3 styles** and **3 weights**, giving you **9 variants** per icon.

All icons use a 24×24 viewBox with `currentColor`, so they inherit your text color automatically.

### Naming

Icon names are lowercase kebab-case and follow a few predictable rules, so you can often guess a name without searching:

- **Glyph first, modifier after** — `grid-plus`, `folder-x`, `clipboard-check`.
- **Shared modifier vocabulary** — `plus`, `minus`, `x`, and `check` (not `add`, `remove`, `close`, or `done`).
- **Shape containers come right after the glyph** — `plus-circle`, `x-square`; with a direction it becomes `arrow-circle-down`, `chevron-circle-up`.
- **Direction is always the final segment** — `-up` / `-down` / `-left` / `-right`, with vertical before horizontal for diagonals (`arrow-down-left`).

Every icon also carries search tags (synonyms like "add" for `plus`), so searching by what an icon does will find it even if you don't know the exact name.

### Brand icons

UI/UX Icons does not include brand or logo icons. Trademarks and brand assets carry legal constraints that are difficult to maintain in an open icon library. For brand icons, we recommend <a href="https://simpleicons.org/" target="_blank" rel="noopener noreferrer">Simple Icons</a>.

---

## Download

Get everything in one archive via **Download** in the site header.

The ZIP includes:

You can also copy individual SVGs from the grid on the icons page.

### npm and CDN

The same assets ship on npm as <code>@uiuxicons/core</code> (no code, no dependencies):

```bash
npm install @uiuxicons/core
```

Because it is on npm, everything is also available from a CDN without any build tools:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uiuxicons/core@0/font/uiuxicons.css" />

<img src="https://cdn.jsdelivr.net/npm/@uiuxicons/core@0/svg/line-regular/gear.svg" width="24" height="24" alt="" />
```

Pin an exact version (e.g. <code>@0.4.0</code>) in production.

---

## React

The `@uiuxicons/react` package provides typed, tree-shakeable components. Only the icons you import are included in your bundle.

### Install

```bash
npm install @uiuxicons/react
```

Requires **React 19** or later.

### Basic usage

Component names are `Icon` + PascalCase icon id (e.g. `gear` → `IconGear`).

```tsx
import { IconGear, IconHouse } from "@uiuxicons/react";

function App() {
  return (
    <div>
      <IconGear />
      <IconHouse size={32} />
    </div>
  );
}
```

Icons accept standard SVG attributes: `className`, `style`, `onClick`, `ref`, etc.

### Variants & props

Use `variant` and `weight`. Defaults: `line` + `regular`.

```tsx
<IconGear />                                     {/* line + regular */}
<IconGear variant="duotone" weight="bold" />     {/* duotone + bold */}
<IconGear variant="solid" weight="light" />      {/* solid + light */}
```

### IconProvider

Use `IconProvider` to set default props for all icons in a subtree. Individual icon props override the provider.

```tsx
import { IconProvider, IconGear, IconHouse } from "@uiuxicons/react";

<IconProvider variant="duotone" weight="bold" size={20}>
  <IconGear />            {/* duotone + bold + 20px */}
  <IconHouse size={32} /> {/* duotone + bold + 32px (overrides size) */}
</IconProvider>
```

Providers can be nested; the inner provider's values take priority and any unset props fall through to the outer provider.

### Duotone (React)

Duotone icons use an accent layer at 25% opacity. Override with `--uiux-accent`:

```tsx
<IconGear
  variant="duotone"
  className="text-foreground [--uiux-accent:theme(colors.primary)]"
/>
```

Plain CSS: set `color` and `--uiux-accent` on a parent or the icon.

### Accessibility

Decorative icons use `aria-hidden="true"`. For meaningful icons, add `aria-label` or `title`:

```tsx
<IconGear aria-label="Settings" />
```

### With shadcn/ui

```tsx
import { IconGear } from "@uiuxicons/react";
import { Button } from "@/components/ui/button";

<Button variant="outline" size="icon">
  <IconGear className="size-4" />
</Button>
```

### With Tailwind CSS

```tsx
<IconGear className="size-5 text-foreground" />
```

### TypeScript

```tsx
import type { IconProps } from "@uiuxicons/react";

function MyIcon(props: IconProps) {
  return <IconGear variant="solid" {...props} />;
}
```

### Tree-shaking

The package ships one module per icon and is marked `sideEffects: false`, so your bundler keeps only the icons you import. You can also import a single icon module directly:

```tsx
// Standard (tree-shakeable)
import { IconGear } from "@uiuxicons/react";

// Optional: import a single icon module directly
import { IconGear } from "@uiuxicons/react/icons/gear";
```

---

## Vue

The `@uiuxicons/vue` package provides typed, tree-shakeable components. Only the icons you import are included in your bundle.

### Install

```bash
npm install @uiuxicons/vue
```

Requires **Vue 3.5** or later.

### Basic usage

Component names are `Icon` + PascalCase icon id (e.g. `gear` → `IconGear`).

```vue
<script setup>
import { IconGear, IconHouse } from "@uiuxicons/vue";
</script>

<template>
  <IconGear />
  <IconHouse :size="32" />
</template>
```

Icons accept standard SVG attributes: `class`, `style`, event listeners, etc.

### Variants & props

Use `variant` and `weight`. Defaults: `line` + `regular`.

```vue
<template>
  <IconGear />                                     <!-- line + regular -->
  <IconGear variant="duotone" weight="bold" />     <!-- duotone + bold -->
  <IconGear variant="solid" weight="light" />      <!-- solid + light -->
</template>
```

### IconProvider

Use `IconProvider` to set default props for all icons in its subtree. Individual icon props override the provider.

```vue
<script setup>
import { IconProvider, IconGear, IconHouse } from "@uiuxicons/vue";
</script>

<template>
  <IconProvider variant="duotone" weight="bold" :size="20">
    <IconGear />              <!-- duotone + bold + 20px -->
    <IconHouse :size="32" />  <!-- duotone + bold + 32px (overrides size) -->
  </IconProvider>
</template>
```

Providers can be nested; the inner provider's values take priority and any unset props fall through to the outer provider.

### Duotone (Vue)

Duotone icons use an accent layer at 25% opacity. Override with `--uiux-accent`:

```vue
<template>
  <IconGear
    variant="duotone"
    class="text-foreground"
    style="--uiux-accent: var(--color-primary)"
  />
</template>
```

Plain CSS: set `color` and `--uiux-accent` on a parent or the icon.

### Accessibility

Decorative icons use `aria-hidden="true"`. For meaningful icons, add `aria-label` or `title`:

```vue
<template>
  <IconGear aria-label="Settings" />
  <IconGear title="Settings" />
</template>
```

### With Tailwind CSS

```vue
<template>
  <IconGear class="size-5 text-foreground" />
</template>
```

### TypeScript

```vue
<script setup lang="ts">
import { IconGear } from "@uiuxicons/vue";
import type { IconProps } from "@uiuxicons/vue";

const props = defineProps<IconProps>();
</script>

<template>
  <IconGear variant="solid" v-bind="props" />
</template>
```

### Nuxt

The package works with Nuxt 3 out of the box. Import icons directly in your components:

```vue
<script setup>
import { IconGear } from "@uiuxicons/vue";
</script>

<template>
  <IconGear />
</template>
```

### Tree-shaking

The package ships one module per icon and is marked `sideEffects: false`, so your bundler keeps only the icons you import. You can also import a single icon module directly:

```vue
<script setup>
// Standard (tree-shakeable)
import { IconGear } from "@uiuxicons/vue";

// Optional: import a single icon module directly
import { IconGear } from "@uiuxicons/vue/icons/gear";
</script>
```

---

## Web Font

The ZIP includes `font/<style>/` with `.woff2` and `.ttf` for each weight, plus `font/uiuxicons.css` (generated `@font-face` rules + named classes) and `font/codepoints.json`.

**Duotone in fonts:** single-color only (glyph outline). Use SVG or React for real duotone accents.

### Use uiuxicons.css (recommended)

Keep `uiuxicons.css` in the same folder as `line/`, `duotone/`, and `solid/` so the `url(...)` paths resolve. Link it from your HTML:

```html
<link rel="stylesheet" href="./font/uiuxicons.css" />
```

On one element, combine:

```html
<span class="uiuxicon uiux-line uiux-bold uiux-gear" aria-hidden="true"></span>
```

The stylesheet defines `::before { content: "\e…" }` per icon. The style class (e.g. `uiux-line`) sets `font-family: "UIUX Icons Line"` and the weight class (e.g. `uiux-bold`) sets `font-weight: 700`.

### Codepoints

Glyphs use the private-use area starting at `U+E001`, with the same mapping in every font file. Codepoints are **stable across releases**: once an icon is assigned a codepoint it keeps it forever, and new icons are appended after the highest existing codepoint. `codepoints.json` maps each id to a decimal codepoint for scripts or custom CSS.

### Raw HTML without the bundle

HTML has no named entity for custom PUA glyphs, only numeric references work unless you use the generated CSS:

```html
<span class="uiuxicon" style="font-family: 'UIUX Icons Line', monospace; font-weight: 400" aria-hidden="true">&#xe001;</span>
```

Ligatures (typing the icon name) are not supported, fixed codepoints only.

Prefer **React**, **Vue**, or **inline SVG** when you need duotone, precise sizing, or tree-shaking.

---

## Accessibility

Icons are visual by nature, but proper markup ensures they work for everyone, including users of screen readers and other assistive technologies.

### Decorative vs. meaningful icons

Most icons in a UI are **decorative** -- they sit next to a visible text label and add no extra information. These should be hidden from assistive technology so screen readers don't announce redundant content.

**Meaningful** icons convey information on their own, without an adjacent text label. A settings gear button with no visible "Settings" text is a common example. These need an accessible name.

### How it works

Both `@uiuxicons/react` and `@uiuxicons/vue` handle this automatically:

- **No label provided** -- the icon renders with `aria-hidden="true"` and `focusable="false"`, hiding it from screen readers.
- **Label provided** -- when you pass `aria-label`, `aria-labelledby`, `aria-describedby`, or `title`, the icon renders with `role="img"` instead, making it visible to assistive technology.

### Choosing the right attribute

| Attribute | When to use |
|---|---|
| `aria-label` | Standalone icons (e.g. icon-only buttons). Provides an accessible name directly. |
| `title` | When you want a visible tooltip on hover in addition to an accessible name. |
| `aria-labelledby` | When the label text already exists elsewhere in the DOM and you want to reference it by `id`. |
| `aria-describedby` | When the icon has a description (not a name) provided by another element. |

### React examples

```tsx
{/* Decorative -- hidden from screen readers */}
<Button>
  <IconGear /> Settings
</Button>

{/* Meaningful -- icon-only button needs a label */}
<Button aria-label="Settings">
  <IconGear />
</Button>

{/* Using title for a tooltip + accessible name */}
<IconGear title="Settings" />
```

### Vue examples

```vue
<template>
  <!-- Decorative -->
  <button>
    <IconGear /> Settings
  </button>

  <!-- Meaningful -->
  <button aria-label="Settings">
    <IconGear />
  </button>

  <!-- Using title -->
  <IconGear title="Settings" />
</template>
```

### Font icons

When using the icon font, add `aria-hidden="true"` manually since font glyphs are always text nodes:

```html
<button>
  <span class="uiuxicon uiux-line uiux-regular uiux-gear" aria-hidden="true"></span>
  Settings
</button>
```

For icon-only font buttons, add `aria-label` on the button itself, not on the icon span.

### Best practices

- Prefer decorative icons paired with visible text whenever possible.
- Never rely solely on color to communicate meaning; pair icons with labels.
- Test with a screen reader (VoiceOver, NVDA, JAWS) to verify announcements.
- When an icon is inside an interactive element (`<button>`, `<a>`), the accessible name should be on the interactive element, not the icon.