How do I use xicons icons in a Vue or React project?

xicons (xicons.org) is an icon library that ships the same icon set for both Vue and React, so you pick the package that matches your framework and import icons as components. The site itself is a browser for finding icons and copying the correct name; the actual usage happens through the framework-specific package in your project. This guide covers the entry points on xicons.org and the general import pattern for each framework.

Start on xicons.org

Use the site as a search and reference tool before touching your code:

• Browse or search the icon grid to find the icon you want.
• Note the exact icon name — it is the identifier you will import, and it is shared across the Vue and React versions.
• Switch between the Vue and React views on the site to confirm the component name and import style for your framework.

Because the same name maps to both frameworks, a mismatch usually comes from copying a Vue-style import into a React file (or the reverse), not from the icon name itself.

Install the package for your framework

xicons is distributed as separate packages per framework. Install the one that matches your project rather than a single universal package.

Confirm the exact package name on xicons.org, since the site is the authoritative source for the current package identifiers.

Use an icon in Vue

1. Install the Vue package for xicons.
2. Import the specific icon component by its name from the site.
3. Register or reference it in your component.
4. Place it in your template where you want the icon to render.

Expected result: the icon renders as an inline component you can size and style like any other element.

Use an icon in React

1. Install the React package for xicons.
2. Import the icon component by name.
3. Render it as a JSX element inside your component.

Expected result: the icon renders as a React component, so you can pass props such as size or color the same way you would to other components.

Common sticking points

• Wrong package for the framework. Importing the Vue build into a React project (or vice versa) is the most common failure. Match the package to the framework first.
• Name mismatch. The icon name on the site is the import name. If the import fails, recheck the exact spelling on xicons.org.
• Styling not applying. Icons are components, so size and color are usually controlled through props or CSS on the component, not by editing the icon file.

Quick decision guide

• Using Vue → install the Vue package, import icons as components, use them in templates.
• Using React → install the React package, import icons as components, render them as JSX.
• Just exploring → use xicons.org to search names and preview icons before installing anything.

If you tell me your framework and build tool, I can narrow this to the exact install command and a minimal working snippet.