# @primeicons/vue

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

Latest version **8.0.2** (published 2026-09-23) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @primeicons/vue
pnpm add @primeicons/vue
yarn add @primeicons/vue
bun add @primeicons/vue
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 8.0.2 |
| Published | 2026-09-23 |
| First published | 2026-02-06 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 346.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | PrimeTek Informatics |
| Maintainers | mert.sincan |
| Keywords | primeicons, vue, vue3, icons, svg-icons, vue-icons, icon-components |

## Links

- npm: https://www.npmjs.com/package/@primeicons/vue
- Repository: https://github.com/primefaces/primeicons-nextchapter
- Homepage: https://primeicons.dev/
- Issues: https://support.primeui.dev
- npm.io page: https://npm.io/package/@primeicons/vue

## Dependencies (2)

- [@primeuix/utils](https://npm.io/package/@primeuix/utils.md) ^0.8.0
- [@primeicons/core](https://npm.io/package/@primeicons/core.md) 8.0.2

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 8.0.2 (latest) — 2026-09-23
- 8.0.1 — 2026-09-08
- 8.0.0 — 2026-07-15
- 8.0.0-rc.3 — 2026-07-15
- 8.0.0-rc.2 — 2026-07-08
- 8.0.0-rc.1 — 2026-06-28
- 8.0.0-beta.1 — 2026-06-25
- 8.0.0-alpha.10 — 2026-06-15
- 8.0.0-alpha.9 — 2026-05-12
- 8.0.0-alpha.8 — 2026-04-26
- 8.0.0-alpha.7 — 2026-02-20
- 8.0.0-alpha.6 — 2026-02-09
- 8.0.0-alpha.5 — 2026-02-08
- 8.0.0-alpha.4 — 2026-02-06
- 8.0.0-alpha.3 — 2026-02-06
- … 2 more at https://npm.io/package/@primeicons/vue/versions

## README

# @primeicons/vue

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

## Installation

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

## Usage

### Import All Icons

```vue
<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)

```vue
<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

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

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

### With Custom Styles

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

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

### Dynamic Icon Rendering

```vue
<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

```vue
<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)

```ts
// 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:

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

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

```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`)

```css
/* 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:

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

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

```typescript
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](https://primeicons.dev).

## License

Licensed under the [PrimeUI License](https://primeui.dev/licenses) - Copyright (c) [PrimeTek Informatics](https://www.primetek.com.tr)

---
_Source: https://npm.io/package/@primeicons/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._