🚀 React 3D Icons

✨ Features

• 🎨 650+ 3D icons across multiple styles
• ⚡ Tree-shakable imports (import only what you use)
• 🧩 Simple React components
• 🎯 Multiple styles & categories
• 🚀 Zero dependencies
• 💤 Lazy-loaded images by default

📦 Installation

npm install @nobertdev/react-3d-icons

Peer dependency: React 18+

🚀 Quick Usage

import { Rocket, Heart, Star } from "@nobertdev/react-3d-icons/front-color";

export default function App() {
  return (
    <div className="flex gap-4">
      <Rocket className="w-12 h-12" />
      <Heart className="w-12 h-12" />
      <Star className="w-12 h-12" />
    </div>
  );
}

⚡ Short Aliases

import { Rocket } from "@nobertdev/react-3d-icons/dc"; // dynamic-color
import { Heart } from "@nobertdev/react-3d-icons/dp"; // dynamic-premium
import { Star } from "@nobertdev/react-3d-icons/fc"; // front-color
import { Bell } from "@nobertdev/react-3d-icons/pf"; // premium-front

🎨 Categories

| Category | Import Path | Alias | Description | | --------------- | ----------------- | ----- | ------------------------------------------ | | Dynamic Color | dynamic-color | dc | Colorful 3D icons with dynamic perspective | | Dynamic Premium | dynamic-premium | dp | Premium 3D icons with dynamic perspective | | Front Color | front-color | fc | Colorful 3D icons (front view) | | Premium Front | premium-front | pf | Premium icons (front view) |

🧩 Props

All icons are forwardRef components rendering an <img />.

| Prop | Description | | -------------- | ------------------------------------ | | className | Style using Tailwind / CSS | | style | Inline styles | | width/height | Control size | | onClick | Click handler | | ref | Access the <img> element | | alt | Defaults to icon name (overrideable) | | loading | "lazy" by default |

🧠 Naming Convention

| File Name | Component | | --------------------------------------- | ------------ | | 3dicons-rocket-dynamic-color.png | Rocket | | 3dicons-credit-card-front-premium.png | CreditCard | | 3dicons-chat-bubble-dynamic-color.png | ChatBubble | | 3dicons-3d-coin-front-color.png | ThreeDCoin |

🔗 Links

• 🌐 Icons & Documentation: https://react-3d-icons.vercel.app/
• 💻 GitHub: https://github.com/NOBERT167/react-3d-icons
• 📦 npm: https://www.npmjs.com/package/@nobertdev/react-3d-icons

💡 Use Cases

• Dashboards
• SaaS products
• Landing pages
• Mobile-first UIs
• Design systems

👨‍🍳 Author

Built with ❤️ by Nobert Langat

📄 License

MIT