Pqoqubbw Icon

Description

A set of beautiful open-source animated icons compatible with shadcn style. Copy-paste or install via CLI. Perfect for enhancing sidebars. 3.5K GitHub stars.

Visit Site

What is Pqoqubbw Icon

This set of animated icons truly caught my eye! icons.pqoqubbw.dev is an open-source animated icon library specifically designed for modern UI, particularly well-suited for shadcn's design style. Honestly, as a developer who frequently uses shadcn, finding this library was like discovering treasure. Unlike traditional static icons that feel rigid, these have smooth animation effects that instantly bring interfaces to life. Best of all, you can install directly via shadcn CLI - super convenient to use. With 3.5K GitHub stars already, it's clear how popular it is.

Homepage

How to use Pqoqubbw Icon

Installation

The simplest way is to install via shadcn CLI:

pnpm dlx shadcn@latest add "https://icons.pqoqubbw.dev/c/icon-name.json"

Usage Steps

Visit https://icons.pqoqubbw.dev
Browse or search for needed icons
Click icons to see animation effects
Copy installation commands or component code
Import and use in your project

Code Example

import { LockOpen } from "@/components/ui/icons";

function MyComponent() {
  return (
    
  );
}

Pqoqubbw Icon Key Features

Perfect shadcn Compatibility

Specifically designed for shadcn/ui, can be installed directly via CLI, seamlessly integrates with existing components

Smooth Animation Effects

Built on motion and lucide, provides silky smooth animation transitions

Open Source MIT License

Completely open source, free to use, modify, and distribute

Rich Icon Types

Covers common icons across UI, social, files, devices, and multiple other categories

Performance Optimized

Animation effects are optimized to not impact page performance

One-Click Copy

Supports direct copying of component code for quick project integration

Pqoqubbw Icon Use Cases

Modern Web Applications

Add smooth animated icons to React applications to enhance user experience

Dashboard Design

Use animated icons in admin panel sidebars and navigation to enhance visual effects

Mobile Applications

Use animated icons in mobile interfaces to provide better interaction feedback

Button Interactions

Provide visual feedback during button clicks and state toggles

Loading States

Use loading animation icons to replace traditional loading spinners

Pqoqubbw Icon Pros & Cons

Pros

Perfect compatibility with shadcn/ui ecosystem

Smooth and natural animation effects

Extremely simple installation and usage

Completely free and open source

Well-optimized performance

High community activity

Excellent icon quality

Supports one-click code copying

Cons

Relatively limited icon quantity

Mainly for React ecosystem

Animation effects cannot be customized

Depends on shadcn/ui framework

Relatively simple documentation

Pqoqubbw Icon FAQ

Q1: Can these icons be used in commercial projects?

Yes, this project uses the MIT open source license, completely usable in commercial projects without copyright concerns.

Q2: Can they be used in frameworks other than shadcn?

Although specifically designed for shadcn, since they're React-based, they can theoretically be used in other React projects, though additional configuration may be needed.

Q3: Do the icon animations affect performance?

No, the animation effects are optimized using CSS animations and reasonable frame rates, causing no significant impact on page performance.

Q4: How to customize icon colors and sizes?

You can control colors and sizes through standard CSS class names like className, just like using regular SVG icons.

More about Icons

Ming Cute

MingCute Icon: A free open-source library with over 2,300 icons in SVG, PNG, and Webfont formats.

Icon Buddy

Iconbuddy: Search, download, customize, and edit over 200,000 free open-source SVG icons.

IconPark

IconPark: ByteDance's open-source icon library generating multiple themes from a single SVG. Lightweight code and flexible use cases for designers and developers.