Frequently asked questions
Licensing, installation and how the icons work. Can’t find your answer? Read about the project or see what’s next on the roadmap.
Licensing
Are Omakase Icons free for commercial use?
Yes. Every icon in every style is free for personal and commercial projects, including client work, apps, websites, templates and products you sell. The library is open source under the MIT license.
Do I need to give credit?
No visible credit is needed in your product or design. The MIT license asks that the license notice stays with copies of the code, and our npm packages already include it.
Can I use them in client work or products I sell?
Yes. Use them in client projects, apps, themes, templates and UI kits, free or paid. The only thing the MIT license asks is that the license notice stays with copies of the source code.
Is there a paid or Pro version?
No. All styles, corners and weights are free, with no account, no private package registry and no usage limits.
The icons
How many icons are there?
152 today, each in 4 styles and 2 corner shapes, so 1216 ready-made SVGs before you change the stroke weight. We add icons in every release, listed in the changelog, and are working towards about 500 for launch.
What styles are available?
Stroke (outline), solid (filled), duotone and twotone, each with rounded or sharp corners. All of them are generated from one drawing, so every style of an icon lines up exactly.
What’s the difference between rounded and sharp?
Rounded icons have round line ends and softened corners. Sharp icons have square line ends and crisp corners for a more technical look. Both come from the same drawing, so you can switch a whole product from one to the other with a single setting.
How is this different from other icon libraries?
Most libraries draw each style separately and often charge for the extra styles. Omakase draws every icon once and generates all styles, corners and weights from that drawing, so they always match, and all of them are free. Stroke weight also adapts to the icon’s size, and an MCP server keeps AI coding tools from inventing icon names.
Can I change the stroke width?
Yes. Set strokeWidth anywhere from 1 to 2. If you leave it unset, the icon picks a weight for its size: 2.25 at 16px, 1.8 at 20px and 1.5 at 24px and above, so small icons stay crisp.
What grid are the icons drawn on?
A 24 × 24 grid. They work at any size because they’re SVG, and the automatic stroke weight keeps them sharp at 16px.
Is there a UAE dirham icon?
Yes. currency-aed is the new UAE dirham symbol, available in every style, as SVG and as a component. More Middle East currency and payment icons are on the roadmap.
Do the icons support right-to-left layouts?
Not yet automatically. Mirrored versions of directional icons such as arrows and chevrons for right-to-left languages like Arabic are on the roadmap, together with a set of Arabic interface icons.
An icon I need is missing. What can I do?
We’re building icon requests with voting, so the most-wanted icons get drawn first. Until then, check the roadmap and the changelog for what’s coming.
Using them in code
How do I use the icons in React?
Install @uv-foundry/icons-react, then import the icon you need, for example import { HomeIcon } from '@uv-foundry/icons-react', and render <HomeIcon variant="duotone" />.
Do they work with Vue, Svelte or plain HTML?
Yes. Use @uv-foundry/icons-vue for Vue 3, @uv-foundry/icons-svelte for Svelte 5 and @uv-foundry/icons-core for any other JavaScript. You can also download plain SVG files from any icon’s page.
Can I download SVG files without npm?
Yes. Every icon page has SVG downloads for all 8 styles, plus the SVG code to copy and paste. No account is needed.
Do they work with Tailwind CSS?
Yes. Icons use currentColor, so text colour classes like text-blue-600 colour them, and className is passed through to the SVG.
Will they make my bundle bigger?
Only by the icons you import. Every icon is its own export and the packages are marked side-effect free, so bundlers drop everything you don’t use.
Are the icons accessible?
Icons are hidden from screen readers by default, which is right for decorative icons next to text. For an icon that stands alone, such as an icon-only button, pass a title and it gets an accessible label.
Design tools and AI
Can I use them in Figma?
Today you can download or copy any icon as SVG and paste it into Figma. A Figma library and plugin with style, corner and weight controls are on the roadmap.
What is the Omakase MCP server?
MCP (Model Context Protocol) lets AI coding tools such as Claude Code and Cursor use outside tools. Our MCP server lets your assistant search the real icon catalog and get working code, so it never imports an icon that doesn’t exist.
Why use the MCP server instead of letting the AI draw an SVG?
An SVG written by an AI on the spot rarely matches the rest of your icons and can be malformed. With the MCP server your assistant uses real, tested icons from the library, in the style you chose, and gets the correct import for your framework.
How do I connect the MCP server?
In Claude Code run: claude mcp add --transport http omakase-icons https://icons.oma-kase.com/mcp. In other tools, add https://icons.oma-kase.com/mcp as a Streamable HTTP server. No account or API key is needed.