OpenIcons

The icon library for OpenVue, continued.

Documentation · Vue components · Migrate from PrimeIcons · Changelog

About

OpenIcons is a community-maintained continuation of PrimeIcons, the icon font used by PrimeVue and the wider Prime ecosystem, following its archival by the original maintainers. The project is stewarded by openvi-foundation, an independent organization of experienced developers who use these libraries in production and are committed to keeping them maintained, stable, and open.

OpenIcons is not affiliated with PrimeTek or PrimeUI. It ships as a webfont and as Vue 3 components, with no runtime dependencies.

Installation

npm install @openvue/openicons

import '@openvue/openicons/openicons.css';

Then reference an icon by class:

<i class="oi oi-check"></i>
<i class="oi oi-spin oi-spinner"></i>

Icons inherit font-size and color from their parent, so they scale with surrounding text:

<i class="oi oi-search" style="font-size: 1.5rem; color: var(--primary)"></i>

oi-fw gives an icon a fixed width, useful for aligning lists of menu items.

Vue components

The webfont loads every glyph to show one, cannot be multicolored, and puts icons in the text layer where screen readers meet them. For Vue 3 apps, @openvue/openicons-vue ships each icon as a tree-shakeable SVG component instead. Importing two icons costs under 1 KB.

npm install @openvue/openicons-vue

<script setup>
import OiCheck from '@openvue/openicons-vue/icons/OiCheck';
</script>

<template>
  <OiCheck />
  <OiCheck :size="32" title="Saved" />
</template>

Icons default to 1em and currentColor, so they follow surrounding text exactly as the font does. They are aria-hidden unless given a title, which promotes them to role="img" with an accessible name. See the package README for all props.

Migrating from PrimeIcons

Existing markup keeps working through a compatibility stylesheet, so the migration is a one-line dependency swap:

- import 'primeicons/primeicons.css';
+ import '@openvue/openicons/primeicons.css';

That entry point loads openicons-compat.css, which aliases every .pi-* class onto the new font. Nothing in your templates has to change.

To move to the new prefix, import @openvue/openicons/openicons.css instead and rename pi pi-check to oi oi-check throughout. Both stylesheets can be loaded at once during a gradual migration.

One icon was removed rather than renamed: pi-prime was the PrimeTek logo mark, which the MIT license does not cover.

Stability

Codepoints are append-only. New icons get new codepoints, and no existing icon is ever renamed, removed or renumbered, so upgrading can never change which glyph a class you already use renders. This is checked on every pull request.

Ecosystem

The fork spans the full toolchain, each piece maintained under the openvi-foundation organization.

| Repository | Description | | ------------------------------------------------------------------------- | --------------------------------------- | | openvue | The core Vue UI component library | | openux | Shared theming and design-token package | | openicons | Icon library (this repository) | | openvue-tailwind | Components styled with Tailwind CSS |

Contributing

OpenIcons is maintained by the openvi-foundation team together with the community. Icon requests, bug reports, fixes and new icons are all welcome.

Start with the contributing guide for the build setup and the steps for adding an icon.

Contributors ✨

Everyone who has helped build OpenIcons since the fork: code, icons, docs, bug reports, and ideas.

License

MIT, unchanged. Every release under the MIT license stays exactly as it is. This fork doesn't affect that in any way.