untitledui-js is a collection of simply beautiful open source icons for React.js sourced from Untitled UI. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
-
Features 1100+ icons sourced from Untitled UI
-
Compatible with Framer motion
npm install untitledui-js
import { Home01 } from "untitledui-js/icons/general";
import { General } from "untitledui-js"
const ExampleComponent = () => {
return (
<>
<General.Home01 size="60px" stroke="2px"/>
<Home01 size="60px" stroke="2px" />
</>
)
};
export default ExampleComponent;
The icons can be imported via two ways, the first being through direct import of the icons :
import { HomeSmile } from "untitledui-js/icons/general"
or through category based import :
import { General } from "untitedui-js"
we adice you use direct imports except you are familiar with untitled ui's icon categories and the icons in each category
The icons are compatible with all the props that are available to the regular svg component but with some added props to allow compatibility with other libraries, customizability and improve development speed
Note: All icons support framer motion's animation props, you can use them directly
<Home01 animate={}/>
or passing them into pathProps
which adds the animation properties to the path components
<Home01 pathProps={{
animate: ""
}}/>
Added Props | Types | Definition | Example |
---|---|---|---|
size | string |
defines both height and width properties of the icon | <Home01 size="60px"/> |
pathProps | React.SVGProps<SVGPathElement> |
allows for the adding of path props and framer motion path props to the path tag | <Home01 pathProps{{clip-rule:"evenodd"}}/> |
Components are defined with Camelcase. for example home-01 -> Home01, activity-01 -> Activity01
If you are not familiar with the icons in Untitled UI's icon pack you can visit Untitled UI Icons