Untitled UI JS

Introduction

Welcome to the untitledui-js icon library! Access over 1100+ beautiful and customizable icons, designed in the Untitled UI style. This library is fully integrated with Framer Motion for easy animation support, making it perfect for creating smooth, interactive interfaces. Plus, it's free and open source!

Installation

To get started, choose the installation option that fits your needs:

1. With Framer Motion Support: If you want to use animations and transitions with your icons, install the untitledui-js library along with Framer Motion:

npm install untitledui-js framer-motion

2. Without Framer Motion Support: If you only need the icons without any animation support, use the base version:

npm install untitledui-js-base

Getting Started

The untitledui-js library seamlessly supports Framer Motion properties right out of the box. This means you can easily animate your icons by passing Framer Motion's motion.svg properties directly to them, with no additional configuration required.

Example Usage with Framer Motion

Here's an example of how to use the Annotation icon with Framer Motion properties:

import { Annotation } from "untitledui-js";

export default function App() {
  return (
    // Assuming "initial" and "animate" are Framer Motion variants
    <Annotation initial="initial" animate="animate" />
  );
}

Animating SVG Paths

With untitledui-js, you can also animate specific parts of an icon using the pathProps property. This allows you to pass properties to the individual SVG paths within an icon. However, this functionality is not available in the untitledui-js-base version because Framer Motion's motion.path properties aren't supported there.

import { Annotation } from "untitledui-js";

export default function App() {
  return (
    <Annotation
      initial="initial"
      animate="animate"
      pathProps={{
        initial: { pathLength: 0 },
        animate: {
          pathLength: 1,
          transition: {
            // Add transition properties here
          },
        },
      }}
    />
  );
}

About untitledui-js-base

If you choose the untitledui-js-base library, you’ll get the same great collection of icons with the ability to modify path properties similar to libraries like lucide-react. This version does not support animation with Framer Motion but still allows for flexible customization of SVG path attributes, making it perfect for lightweight projects or environments where animations are not required.

Playground

Want to see the icons in action? Check out our playground where you can experiment with different icons and their properties.