Documentation

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.

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 Simple Icons.

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.

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

Install

npm install @uiuxicons/react

pnpm add @uiuxicons/react

yarn add @uiuxicons/react

bun add @uiuxicons/react

Requires React 19 or later.

Basic usage

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

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.

<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.

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:

<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:

<IconGear aria-label="Settings" />

With shadcn/ui

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

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

With Tailwind CSS

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

TypeScript

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

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

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

Install

npm install @uiuxicons/vue

pnpm add @uiuxicons/vue

yarn add @uiuxicons/vue

bun add @uiuxicons/vue

Requires Vue 3.5 or later.

Basic usage

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

<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.

<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.

<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:

<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:

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

With Tailwind CSS

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

TypeScript

<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:

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

<template>
  <IconGear />
</template>

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:

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

On one element, combine:

<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:

<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.

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

React examples

{/* 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

<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:

<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.