Icon

A versatile icon component that supports Iconify icons, custom Vue components, VNodes, and raw SVG strings.

Component Features

🎨 Iconify Support: Access 150+ icon sets (MDI, Lucide, Heroicons, Tabler, Carbon, etc.) via icon name strings.
🧩 Custom Icons: Pass Vue components, VNodes, or raw SVG strings as icon sources.
📏 Multiple Sizes: Preset sizes (xs / sm / md / lg / xl) or custom pixel values, with global size inheritance.
🔄 Transforms: Rotate, flip horizontally/vertically, and continuous spin animation.
🌗 Theme Adaptive: Automatically adapts to light/dark mode via currentColor inheritance.
♿ Accessible: Sets aria-hidden="true" by default; supports semantic labeling for meaningful icons.
🔗 Seamless Integration: Designed to compose with BrButton, BrInputGroup, BrTree, and all BreezeUI components.

Basic Usage

Use Iconify icon names to render any icon from the Iconify library.

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:home" size="md" />
    <BrIcon icon="mdi:account" size="md" />
    <BrIcon icon="mdi:cog" size="md" />
    <BrIcon icon="mdi:bell" size="md" />
  </div>
</template>

Icon Sets

BrIcon supports all Iconify icon sets — MDI, Lucide, Heroicons, Tabler, Carbon, and 150+ more.

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-6 items-center">
    <div class="text-center">
      <BrIcon icon="mdi:home" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">MDI</p>
    </div>
    <div class="text-center">
      <BrIcon icon="lucide:home" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Lucide</p>
    </div>
    <div class="text-center">
      <BrIcon icon="heroicons:home-solid" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Heroicons</p>
    </div>
    <div class="text-center">
      <BrIcon icon="tabler:home" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Tabler</p>
    </div>
  </div>
</template>

Sizes

Use the size prop with preset sizes (xs / sm / md / lg / xl) or a custom number in pixels.

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-end">
    <div class="text-center">
      <BrIcon icon="mdi:star" size="xs" />
      <p class="text-xs text-muted-foreground mt-1">xs</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="sm" />
      <p class="text-xs text-muted-foreground mt-1">sm</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="md" />
      <p class="text-xs text-muted-foreground mt-1">md</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">lg</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" size="xl" />
      <p class="text-xs text-muted-foreground mt-1">xl</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:star" :size="48" />
      <p class="text-xs text-muted-foreground mt-1">48px</p>
    </div>
  </div>
</template>

Colors

Set color to any CSS color value. Icons use currentColor by default, inheriting from their parent.

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:heart" size="lg" color="red" />
    <BrIcon icon="mdi:heart" size="lg" color="#3b82f6" />
    <BrIcon icon="mdi:heart" size="lg" color="hsl(142, 71%, 45%)" />
    <BrIcon icon="mdi:heart" size="lg" color="currentColor" class="text-primary" />
  </div>
</template>

Rotate & Flip

Use rotate, flipX, and flipY to transform icons.

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">Default</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :rotate="90" />
      <p class="text-xs text-muted-foreground mt-1">90&deg;</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :rotate="180" />
      <p class="text-xs text-muted-foreground mt-1">180&deg;</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :flip-x="true" />
      <p class="text-xs text-muted-foreground mt-1">FlipX</p>
    </div>
    <div class="text-center">
      <BrIcon icon="mdi:arrow-right" size="lg" :flip-y="true" />
      <p class="text-xs text-muted-foreground mt-1">FlipY</p>
    </div>
  </div>
</template>

Spin Animation

Set spin to true for continuous rotation — useful for loading indicators.

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:loading" size="lg" :spin="true" />
    <BrIcon icon="mdi:refresh" size="lg" :spin="true" />
    Loading...
  </div>
</template>

Custom Icons

Pass Vue components (e.g. Lucide icons) or raw SVG strings as the icon prop.

<script setup>
import { BrIcon } from '@breezeui/vue'
import { Search, Heart } from 'lucide-vue-next'

const customSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>`
</script>

<template>
  <div class="flex gap-4 items-center">
    <div class="text-center">
      <BrIcon :icon="Search" size="md" />
      <p class="text-xs text-muted-foreground mt-1">Component</p>
    </div>
    <div class="text-center">
      <BrIcon :icon="Heart" size="md" color="red" />
      <p class="text-xs text-muted-foreground mt-1">Component</p>
    </div>
    <div class="text-center">
      <BrIcon :icon="customSvg" size="lg" />
      <p class="text-xs text-muted-foreground mt-1">SVG String</p>
    </div>
  </div>
</template>

Disabled State

Set disabled to apply a muted, non-interactive style.

<script setup>
import { BrIcon } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4 items-center">
    <BrIcon icon="mdi:home" size="lg" />
    <BrIcon icon="mdi:home" size="lg" :disabled="true" />
  </div>
</template>

Integration: Buttons

BrIcon works seamlessly with BrButton via slots or inline content.

<script setup>
import { BrIcon, BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-wrap gap-3">
    <BrButton>
      <BrIcon icon="mdi:home" size="sm" />
      Home
    </BrButton>
    <BrButton variant="outline">
      <template #prefix>
        <BrIcon icon="lucide:search" size="sm" />
      </template>
      Search
    </BrButton>
    <BrButton variant="soft" color="primary">
      <template #suffix>
        <BrIcon icon="mdi:arrow-right" size="sm" />
      </template>
      Next
    </BrButton>
    <BrButton variant="outline" color="danger">
      <BrIcon icon="mdi:heart" size="sm" color="red" />
      Like
    </BrButton>
  </div>
</template>

Integration: Input Groups

Combine with BrInputGroup for icon-prefixed or icon-suffixed inputs.

<script setup>
import { BrIcon, BrInput, BrInputGroup, BrInputGroupItem, BrStack } from '@breezeui/vue'
</script>

<template>
  <BrStack gap="3" style="max-width: 400px">
    <BrInputGroup>
      <BrInputGroupItem>
        <BrIcon icon="mdi:account" size="sm" />
      </BrInputGroupItem>
      <BrInput placeholder="Username" />
    </BrInputGroup>
    <BrInputGroup>
      <BrInputGroupItem>
        <BrIcon icon="mdi:lock" size="sm" />
      </BrInputGroupItem>
      <BrInput type="password" placeholder="Password" />
      <BrInputGroupItem>
        <BrIcon icon="mdi:eye-off" size="sm" />
      </BrInputGroupItem>
    </BrInputGroup>
  </BrStack>
</template>

Global Size

Icons inherit the global size from BrConfigProvider when size is not specified.

<template>
  <BrConfigProvider size="lg">
    <BrIcon icon="mdi:home" />
  </BrConfigProvider>
</template>

API

Props

Name	Type	Default	Description
icon	`string \| Component \| VNode`	—	Icon source: Iconify name, Vue component, VNode, or SVG string
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'md'`	Icon size preset or custom pixel value
color	`string`	`'currentColor'`	CSS color value
disabled	`boolean`	`false`	Whether the icon is disabled (muted, non-interactive)
rotate	`number`	`0`	Rotation in degrees
spin	`boolean`	`false`	Enable continuous spin animation
flipX	`boolean`	`false`	Flip horizontally
flipY	`boolean`	`false`	Flip vertically
class	`any`	—	Additional CSS classes

Accessibility

The component sets aria-hidden="true" by default. If the icon conveys meaningful information, wrap it with a visually hidden label:

<template>
  <span role="img" aria-label="Settings">
    <BrIcon icon="mdi:cog" />
  </span>
</template>

#Icon

#Component Features

#Basic Usage

#Icon Sets

#Sizes

#Colors

#Rotate & Flip

#Spin Animation

#Custom Icons

#Disabled State

#Integration: Buttons

#Integration: Input Groups

#Global Size

#API

#Props

#Accessibility