Untitled UI Libraries by Emmanuel C.Alozie
The packages untitledui-js and untitledui-js-base will be deprecated by the end of September 2025.
Moving forward, please use the new framework-specific packages listed below.
- If you were using
untitledui-js-base→ simply switch to@untitledui/icons-react. The API and usage remain unchanged. - If you were using
untitledui-js→ you can now install the specific package you need (e.g.@untitledui/icons-vue,@untitledui/icons-solid, etc.). The import paths and usage remain unchanged.
No breaking changes have been introduced — full backwards compatibility is maintained.
This change ensures developers only install what they need, while reducing overhead for maintainers.
No further library name changes will be made in the future.
// Before import { Icon } from "untitledui-js-base"; <Icon size={24} color="currentColor" />; // After import { Icon } from "@untitled-icons/react"; <Icon size={24} color="currentColor" />;
// React // Before import { Icon } from "untitledui-js/react"; // After import { Icon } from "@untitled-icons/react"; <Icon size={24} color="currentColor" />;
<!-- Vue --> <!-- Before --> <script setup> import { Icon } from "untitledui-js/vue"; </script> <icon :size="24" color="var(--primary)" /> <!-- After --> <script setup> import { Icon } from "@untitled-icons/vue"; </script> <icon :size="24" color="var(--primary)" />
<!-- Svelte --> <!-- Before --> <script> import { Icon } from "untitledui-js/svelte"; </script> <Icon size={24} color="var(--primary)" /> <!-- After --> <script> import { Icon } from "@untitled-icons/svelte"; </script> <Icon size={24} color="var(--primary)" />
// SolidJS // Before import { Icon } from "untitledui-js/solid"; // After import { Icon } from "@untitled-icons/solid"; <Icon size={24} color="currentColor" />;
// Qwik // Before import { Icon } from "untitledui-js/qwik"; // After import { Icon } from "@untitled-icons/qwik"; <Icon size={24} color="currentColor" />;
Framework Agnostic JavaScript/Typescript implementation of Untitled UI icons. Features:
- Full SVG specification support
- Framework packages: React, Vue 3, SolidJS, Qwik, Svelte
- TypeScript-first
- Tree-shaking
- Semantic versioning
Install the framework-specific package you need:
# React npm install @untitled-icons/react # Vue npm install @untitled-icons/vue # SolidJS npm install @untitled-icons/solid # Qwik npm install @untitled-icons/qwik # Svelte npm install @untitled-icons/svelte
// React / Solid / Qwik <Icon size={24} color="currentColor" /> <!-- Vue --> <icon :size="24" color="var(--primary)" /> <!-- Svelte --> <Icon size={24} color="var(--primary)" />
import { motion } from "motion/react"; <Icon animation={{ motion: motion, attributes: { svg: { whileHover: { scale: 1.1 } }, path: { transition: { duration: 0.5 } }, }, }} />;
All icons support standard SVG attributes:
- viewBox, fill, stroke
- Class/style overrides
- Accessibility attributes (aria-*, role)
| Framework | Version | Motion Support | | --------- | ------- | -------------- | | React | 17+ | true | | Vue | 3+ | false | | Solid | 1+ | false | | Qwik | 1+ | false | | Svelte | 3+ | false |
Custom Attribution License © 2025 Untitled UI - LICENSE