Untitledui Js

⚠️ Deprecation Notice - Move To New Framework Specific Libraries

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.

Migration Examples

From untitledui-js-base → @untitled-icons/react

// Before
import { Icon } from "untitledui-js-base";

<Icon size={24} color="currentColor" />;

// After
import { Icon } from "@untitled-icons/react";

<Icon size={24} color="currentColor" />;

From untitledui-js → framework-specific packages

// 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" />;

Overview

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

Official Documentation

Installation

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

Unified API

// React / Solid / Qwik
<Icon size={24} color="currentColor" />

<!-- Vue -->
<icon :size="24" color="var(--primary)" />

<!-- Svelte -->
<Icon size={24} color="var(--primary)" />

React Motion Example

import { motion } from "motion/react";

<Icon
  animation={{
    motion: motion,
    attributes: {
      svg: { whileHover: { scale: 1.1 } },
      path: { transition: { duration: 0.5 } },
    },
  }}
/>;

Core Features

SVG Compliance

All icons support standard SVG attributes:

• viewBox, fill, stroke
• Class/style overrides
• Accessibility attributes (aria-*, role)

Compatibility

| Framework | Version | Motion Support |
| --------- | ------- | -------------- |
| React     | 17+     | true           |
| Vue       | 3+      | false          |
| Solid     | 1+      | false          |
| Qwik      | 1+      | false          |
| Svelte    | 3+      | false          |

License

Custom Attribution License © 2025 Untitled UI - LICENSE