Works today
Copy icons from the browser
This is how you use UIX Icons today.
Search
Open the icon browser and search by name, synonym or tag.
Open the panel
Click an icon. Pick a style and set the size and stroke. Pro styles open with your licence key. Leave colour unset to keep currentColor.
Copy or download
Copy SVG, JSX, Vue, Svelte, a web component, a data URI or CSS. Or download SVG or PNG.
Paste it in
Paste the code into your HTML, your component or your design tool.
<button type="button" aria-label="Search">
<svg aria-hidden="true" viewBox="0 0 24 24">your copied paths</svg>
</button>.icon {
width: 20px;
height: 20px;
color: #6301E4; /* the SVG paints with currentColor */
}Channels
Where UIX Icons works
Three work today, and each of the others gets a guide here when it ships.
Icon browser Live
Search the library, then copy or download any icon in a free style.
Studio Live
Edit any icon or draw a new one on the grid, then export SVG.
npm (SVG files and metadata) Coming soon
SVG files for each free style, plus a file of names, tags and synonyms.
React, Vue, Svelte, Web Components Coming soon
One component per icon, with the style as a prop.
CDN Coming soon
Load single SVG files by name, with no build step.
Figma Coming soon
A plugin to search and insert icons.
Framer Coming soon
Use the icons in Framer sites.
WordPress Coming soon
Add icons to WordPress pages and blocks.
AI agents (MCP package) Live
Run the open @uix/icons-mcp package on your machine. It has tools to search icons by meaning, get one icon and list the styles.
Hosted MCP endpoint Coming soon
A web address you add to an AI client with nothing to install.
Search uses everyday words
Every icon has synonyms and tags, the words people and AI agents use to ask for it. The browser and the MCP package use them today. The coming channels will use the same data.
AI agents
Use exact icon names
An assistant should pick an icon from the list and never invent one.
Read the names
Fetch /llms-full.txt or /icons.json. Every approved icon is listed once, with its synonyms and tags.
Match by meaning
Look for the word the user said in the synonyms and tags, then use the icon name exactly as listed.
Say when nothing fits
If no listed icon matches, tell the user. Do not make up a name or a new icon.
Or call the tools
The MCP package has search_icons to find icons, get_icon to fetch one icon and list_icon_styles to see the styles.
claude mcp add uix-icons -- npx -y @uix/icons-mcp
# Pro styles:
claude mcp add --env UIX_LICENSE_KEY=YOUR_KEY uix-icons -- npx -y @uix/icons-mcpPro
Turn on the Pro styles
Pro is a subscription, and one licence key covers every channel as it opens.
Subscribe
Subscribe at uixdesign.pagestro.com/checkout. Checkout shows the price and billing period before you pay.
Get your key
Checkout shows your licence key after payment. Keep it safe, because every tool uses it to check your subscription.
Use it
Paste the key into the icon browser when a Pro style asks for it. For the MCP package, set UIX_LICENSE_KEY. The Figma plugin and the npm packages will use the same key when they open.
Manage it
See your invoices or cancel from your account. Pro stays on until the period you paid for ends.
Free styles need no key
Regular Rounded, Regular Sharp and Solid work everywhere without a key or an account.
Specs
Icon specs
These numbers are the same for every icon.
| Spec | Value |
|---|---|
| Canvas | 24 by 24, viewBox 0 0 24 24 |
| Grid | Points snap to 0.25 |
| Strokes | Round ends in rounded styles, square ends in sharp styles |
| Styles per icon | 15, three of them free |
| Free styles | Regular Rounded, Regular Sharp, Solid |
| Colour | currentColor by default |
| Licence of free styles | MIT |
| Pro styles | Subscription, with a licence key |
Accessibility
Accessible icons
How you place an icon decides if everyone can use it.
An icon is not a label. If a button has only an icon, give the button an aria-label and hide the SVG with aria-hidden="true". If the icon sits next to text, hide the icon so screen readers do not read it twice.
Check the colour contrast against the background. Stroke icons are thin, so check them like small text.
Questions
Is there an npm package for UIX Icons?
Not yet. An npm package with SVG files for each free style is coming soon, along with React, Vue, Svelte and Web Components. Until then, copy the code or download the file from the icon browser. This page shows install steps only when they work. The one package you can run now is the MCP package for AI agents.
Can AI agents use UIX Icons?
Yes. An agent should only use icon names that appear in /llms-full.txt or /icons.json, never invent an icon, and say so when none fits. The open MCP package, which runs on your machine, gives it three tools: search_icons, get_icon and list_icon_styles. Every icon has synonyms and tags for that kind of search.
How do I use a UIX icon as a React component?
Today, copy the icon as JSX from the detail panel and paste it into your component. An npm package with ready-made React components is coming soon. The FAQ page has the full steps for React, plain HTML and CSS colour, so this page does not repeat them here.
How do I paste an icon into plain HTML?
Copy the icon as SVG from the detail panel and paste it where you want the icon. A CDN link and sprites for many icons are coming soon. The FAQ page has the full steps, including sizing and how to hide a decorative icon from screen readers.
How do I colour an icon with CSS?
Our SVGs use currentColor, so the icon takes the text colour of its parent. Set color on the parent, for example color: #5b3df5, and the icon follows. You can also set colour in the detail panel before you copy. The icons need no extra fill or stroke rules.
Is the Figma plugin ready?
Not yet. Today you copy an icon as SVG from the browser and paste it into Figma, where it arrives as editable vector paths. A plugin that searches and inserts icons is coming soon. The FAQ page has the plugin details.