@primeicons/vue

@primeicons/vue

PrimeIcons for Vue 3 - 300+ customizable SVG icons as Vue components.

Installation

npm install @primeicons/vue
# or
pnpm add @primeicons/vue
# or
yarn add @primeicons/vue

Usage

Import All Icons

<script setup>
import { Search, Home, User, Cog } from '@primeicons/vue';
</script>

<template>
    <Search />
    <Home :size="32" />
    <User color="blue" />
    <Cog size="2rem" color="#ff0000" />
</template>

Import Individual Icons (Tree-Shakeable)

<script setup>
import Search from '@primeicons/vue/search';
import Home from '@primeicons/vue/home';
</script>

<template>
    <Search :size="24" />
    <Home :size="24" color="green" />
</template>

Props

All icon components accept the following props:

Prop	Type	Default	Description
size	number | string	24	Icon size (width and height)
color	string	currentColor	Icon color
class	string	''	Additional CSS class
style	string | object	{}	Inline styles
spin	boolean	false	Applies a rotation animation

Examples

Basic Usage

<script setup>
import { Heart, Star, Bell } from '@primeicons/vue';
</script>

<template>
    <Heart />
    <Star :size="32" />
    <Bell color="red" />
</template>

With Custom Styles

<script setup>
import { Search } from '@primeicons/vue';
</script>

<template>
    <Search :size="24" color="#007bff" :style="{ marginRight: '8px' }" class="my-icon" />
</template>

Dynamic Icon Rendering

<script setup>
import * as Icons from '@primeicons/vue';
import { computed } from 'vue';

const props = defineProps<{ name: string }>();

const IconComponent = computed(() => Icons[props.name]);
</script>

<template>
    <component :is="IconComponent" v-if="IconComponent" v-bind="$attrs" />
</template>

With Button

<script setup>
import { Search, Plus, Trash } from '@primeicons/vue';
</script>

<template>
    <button><Search :size="16" /> Search</button>

    <button><Plus :size="16" /> Add Item</button>

    <button><Trash :size="16" color="red" /> Delete</button>
</template>

Global Registration (Optional)

// main.ts
import { createApp } from 'vue';
import { Search, Home, User } from '@primeicons/vue';
import App from './App.vue';

const app = createApp(App);

// Register icons globally
app.component('SearchIcon', Search);
app.component('HomeIcon', Home);
app.component('UserIcon', User);

app.mount('#app');

TypeScript

Full TypeScript support:

<script setup lang="ts">
import { Search } from '@primeicons/vue';
import type { IconProps } from '@primeicons/core';

const iconProps: IconProps = {
    size: 24,
    color: 'blue'
};
</script>

<template>
    <Search v-bind="iconProps" />
</template>

Spin

Setting spin to true adds p-icon-spin to the SVG element's class list. The p-icon-spin class comes from PrimeUI's stylesheet.

<script setup>
import { Spinner, Refresh, Cog } from '@primeicons/vue';
import { ref } from 'vue';

const isLoading = ref(true);
</script>

<template>
    <Spinner :spin="true" />
    <Refresh :spin="true" :size="24" />
    <Cog :spin="isLoading" color="gray" />
</template>

The animation can be overridden via CSS:

.p-icon-spin {
    animation: p-icon-spin 1s linear infinite;
}

@keyframes p-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

CSS Classes

Each icon automatically includes these CSS classes:

• p-icon - Base class for all icons
• p-icon-{name} - Specific class for each icon (e.g., p-icon-search)

/* Style all icons */
.p-icon {
    transition: color 0.2s;
}

/* Style specific icon */
.p-icon-heart:hover {
    color: red;
}

Metadata & Icon Lookup

Icon metadata is managed by the @primeicons/metadata package and re-exported here for convenience:

import { ICON_MAP, ICON_MAP_BY_NAME, findIcons } from '@primeicons/metadata/vue';

// Find icon by name (kebab-case)
const iconData = ICON_MAP_BY_NAME['check-circle'];
const CheckCircle = iconData.component; // Already lazy-loaded component

// Search and use
const results = findIcons('arrow');
results.forEach((icon) => {
    const Component = icon.component;
    // Use with <component :is="Component" />
});

Alternatively, import directly from the metadata package:

import { ICON_MAP, findIcons } from '@primeicons/metadata/vue';

Metadata API

Variable	Type	Description
ICON_MAP	IconMetadataEntry[]	All icons as array
ICON_MAP_BY_NAME	Record<string, IconMetadataEntry>	Indexed by kebab-case name
ICON_MAP_BY_COMPONENT	Record<string, IconMetadataEntry>	Indexed by component name
ICON_MAP_BY_CAMEL	Record<string, IconMetadataEntry>	Indexed by camelCase name
TOTAL_ICONS	number	Total icon count
PACKAGE_INFO	object	Package metadata

Function	Returns	Description
getIconNames()	string[]	All kebab-case icon names
getComponentNames()	string[]	All component names
findIcons(query)	IconMetadataEntry[]	Search icons by partial match

JSON Metadata

Access the raw JSON metadata directly:

import metadata from '@primeicons/metadata/vue.json';

console.log(manifest.icons[0]); // { name: 'address-book', component: 'AddressBook', ... }

Icon List

The library includes 300+ icons including:

• Navigation: ArrowLeft, ArrowRight, ChevronUp, ChevronDown
• Actions: Search, Plus, Minus, Check, Times
• Objects: Home, User, Cog, File, Folder
• Social: Facebook, Twitter, Github, Linkedin
• And many more...

View the complete list at primeicons.dev.

License

Licensed under the PrimeUI License - Copyright (c) PrimeTek Informatics