Icon

Source code

Click here View source code for Icon to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Anatomy

The Icon component automatically detects the type of icon you want to display and renders it appropriately.

Icon Anatomy

<template>
  <!-- Iconify Icon -->
  <UiIcon name="lucide:home" />

  <!-- Emoji -->
  <UiIcon name="🚀" />

  <!-- Image URL -->
  <UiIcon name="https://example.com/icon.png" />
</template>

Installation

Usage

Iconify Icons

The primary use case is displaying icons from Iconify's vast collection of icon sets. Simply use the format collection:icon-name.

Different Sizes

Control the size of icons using the size prop. It accepts both numbers (pixels) and strings.

Emojis

The component automatically detects and renders emojis properly.

Custom Images

You can also use custom image URLs. The component will render them as <img> tags.

Preview Code

With Colors

Style icons using Tailwind classes. The component inherits color from the parent context.

In Buttons

Icons work seamlessly with other components like buttons.

Popular Icon Sets

Here are some popular icon sets you can use with the component:

Features

• Automatic Detection: Intelligently detects whether the input is an Iconify icon, emoji, or image URL
• Vast Icon Library: Access to 200,000+ icons from Iconify's collection
• Flexible Sizing: Support for both numeric and string size values
• Emoji Support: Built-in emoji rendering with proper sizing
• Image URLs: Fallback to image rendering for custom icons
• Type Safe: Full TypeScript support with proper type definitions
• Class Support: Accepts Tailwind and custom classes for styling

Props

interface IconProps {
  /**
   * The icon to display. Can be:
   * - Iconify icon name (e.g., "lucide:home")
   * - Emoji (e.g., "🚀")
   * - Image URL (e.g., "https://example.com/icon.png")
   */
  name: string;

  /**
   * Size of the icon in pixels
   * @default 16
   */
  size?: number | string;
}

Finding Icons

To find icons from Iconify's collection:

1. Visit Iconify Icon Sets
2. Search for the icon you want
3. Copy the icon name in the format collection:icon-name
4. Use it in your component: <UiIcon name="lucide:search" />

Popular Icon Collections

• Lucide (lucide:) - Modern, clean icons
• Heroicons (heroicons:) - Tailwind CSS icons
• Material Design (mdi:) - Google's Material Design
• Tabler Icons (tabler:) - Open source icons
• Remix Icon (ri:) - Neutral-style icons
• Simple Icons (simple-icons:) - Brand icons
• Font Awesome (fa6-solid:, fa6-regular:) - Popular icon set

Customization

The Icon component is highly flexible and can be styled using Tailwind classes:

<!-- Color -->
<UiIcon name="lucide:heart" class="text-red-500" />

<!-- Size with Tailwind -->
<UiIcon name="lucide:star" class="h-8 w-8" />

<!-- Rotation -->
<UiIcon name="lucide:loader" class="animate-spin" />

<!-- Opacity -->
<UiIcon name="lucide:info" class="opacity-50" />