Icons

Icon library powered by Lucide Icons. All icons are accessible with proper ARIA attributes and customizable sizing.

Icon Sizes

XS (12px)

SM (16px)

MD (20px)

LG (24px)

XL (32px)

Common Icons

Home

Users

Settings

Search

Bell

Mail

User

Edit

Action Icons

Plus

Minus

X

Check

Download

Upload

Trash

Pencil

Status Icons

Success

Warning

Error

Info

Using with Lucide

<script setup>
import { Home, User, Settings, Search } from 'lucide-vue-next'
</script>

<template>
  <Home class="w-5 h-5" />
  <User class="w-5 h-5" />
  <Settings class="w-5 h-5" />
  <Search class="w-5 h-5" />
</template>

Accessibility Guidelines

✓

Decorative IconsUse aria-hidden="true" for purely decorative icons.

✓

Meaningful IconsInclude aria-label when icon conveys meaning without text.

✓

Focus StatesInteractive icons have visible focus indicators.

✓

Touch TargetsIcon buttons maintain 44x44px minimum touch target.