Welcome to untitledui-icons!
An opinionated, completely blank icon library for you to use any of your custom SVG icons in first party React and Vue libraries. No more inline SVGs!
Add your icon library URL here (or delete this)
Quickstart
Get started in a few simple steps:
- Fork this repo
- Add your custom SVG icons to the
src
directory - Rename
untitledui-icons
to your library name with find and replace - Add your NPM token to your github secrets
- Import the icons in your React or Vue project
Basic Usage
There are a ton of great icon sets out there but most don't provide you with a way to easily use these in code, either providing you with a library where you have to load every icon worse, expecting you to copy and paste svg code inline.
That leads to problems:
- Maintenance is tricky when you inevitably want to update your icons
- Extra code created leads to larger bundles and slower (even marginally) sites
Instead, this library provides a simple way to use your own custom SVG icons in React and Vue, without having to copy and paste them inline.
Go from this:
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
To this:
import { BeakerIcon } from '@untitledui-icons/react/solid'
<BeakerIcon>
Adding your own icons
To add your own icons, simply add them to the src
directory. If you have multiple icon styles, group them into subdirectories. For example:
src
├── outline
│ ├── Annotation.svg
│ ├── ...
├── solid
│ ├── Annotation.svg
│ ├── ...
├── additional icons if you want (See below)
We've preconfigured some default icon styles, but you can add your own rules or remove unused rules if necessary.
If you wish to add or remove icon styles, you'll need to update the build
script in package.json
to include or exclude the new icon styles. We've included a default svgo.config.yaml
file, but you can update this for new icon styles if you'd like more specific rules.
"scripts": {
"build": "npm run build-outline && npm run build-solid && npm run build-light && npm run build-duotone && npm run build-react && npm run build-vue",
...
"build-light": "rimraf ./light ./optimized/light && svgo --config=svgo.config.yaml -f ./src/light -o ./optimized/light --pretty --indent=2",
"build-duotone": "rimraf ./duotone ./optimized/duotone && svgo --config=svgo.config.yaml -f ./src/duotone -o ./optimized/duotone --pretty --indent=2",
}
React
First, install @untitledui-icons/react
from npm:
npm install @untitledui-icons/react
Now each icon can be imported individually as a React component:
import { BeakerIcon } from '@untitledui-icons/react/solid'
function MyComponent() {
return (
<div>
<BeakerIcon className="h-6 w-6 text-blue-500" />
<p>...</p>
</div>
)
}
Icons use an upper camel case naming convention and are always suffixed with the word Icon
.
Vue
Note that this library currently only supports Vue 3.
First, install @untitledui-icons/vue
from npm:
npm install @untitledui-icons/vue
Now each icon can be imported individually as a Vue component:
<template>
<div>
<BeakerIcon class="h-6 w-6 text-blue-500" />
<p>...</p>
</div>
</template>
<script setup>
import { BeakerIcon } from '@untitledui-icons/vue/solid'
</script>
Icons use an upper camel case naming convention and are always suffixed with the word Icon
.
Thanks
Thanks to the Tailwind team for creating the original Heroicons library, which this project is heavily inspired by.
License
This library is MIT licensed.