UIX Icons as SVG and npm

Plain files that work in any project, framework or tool.

npm

Install the package

Every file is inside one package, grouped by style.

Terminal

npm install @uixicons/icons          # Regular Rounded, sprites, font, search
npm install @uixicons/icons-sharp    # Regular Sharp
npm install @uixicons/icons-solid    # Solid

Folders

svg/<style>/<name>.svg
sprite/sprite-<style>.svg
fonts/  css/  codepoints.json
icons.search.json  styles.json

CDN

Use a single file with no install

Load any icon straight from jsDelivr, which serves the npm package.

HTML

<img
  src="https://cdn.jsdelivr.net/npm/@uixicons/icons/svg/stroke-regular-rounded/home.svg"
  width="24" height="24" alt="Home">

An image does not inherit text colour. To colour an icon, inline it or use the sprite or font instead.

Sprite

One file for every icon in a style

Each sprite holds every icon of a style as a symbol with the icon name as its id.

HTML

<svg width="24" height="24" aria-hidden="true">
  <use href="/sprite/sprite-solid.svg#home"></use>
</svg>

Serve the sprite from your own domain. Browsers block a sprite from another origin.

Inline works too

Open any icon in the icon browser and copy it as SVG, JSX, Vue, Svelte or a web component. Copied SVG carries the name uixicons and the icon name, so it keeps that name when you paste it into Figma.

Free and Pro

What is free

	Free styles	Pro styles PRO
Styles	Regular Rounded, Regular Sharp, Solid	The other twelve
npm package, CDN and sprite	Yes	No
Copy from the icon browser	Yes	With a licence key
Licence	MIT	Pro licence

FAQ

Questions

What size are the SVGs?

Every icon is drawn on a 24 by 24 grid and has a viewBox of 0 0 24 24. Set the width and height to any size you like. Strokes scale together with the icon, so the look stays the same from small to large.

Can I recolour an SVG?

Yes. Icons use currentColor, so inline SVG, the sprite and the icon font all follow the CSS color of their parent. An img tag cannot inherit a colour, so use one of the other methods when you need to recolour an icon on the page.

Do I need npm?

No. You can load single files from the CDN, copy an icon from the icon browser or download the SVG. The npm package is for projects that want every file on disk, for example to build a sprite or to work offline.

Where are the Pro styles?

Pro styles are not in the public package. Use the icon browser with your licence key to copy or download them, or call the API with your key in the x-uix-key header. Both give you the same SVG you would get from a file.

Pick an icon and ship it today

Search the library, copy the code you need and drop it into your project.

Browse icons See all packages