NPM Package v2.1.26TypeScript & React 19 Ready

Instalasi badrian-icon

Koleksi ikon React ultra-ringan, presisi, dan sepenuhnya disesuaikan untuk Next.js 15, Remix, Vite, atau Tailwind CSS.

Lihat di NPM
âš¡

Zero Runtime

Semua ikon berbasis komponen SVG React murni tanpa dependensi JavaScript tambahan yang memperlambat browser.

📦

Tree-Shakeable

Dikelola dengan modul monorepo terpisah sehingga hanya ikon yang Anda gunakan yang masuk ke bundle produksi.

🎨

Tailwind Native

Langsung mendukung utility class Tailwind CSS untuk warna, ukuran, dan animasi seperti text-emerald-500 w-6 h-6.

Langkah 01

Instalasi Package

Pilih package manager proyek Anda dan jalankan perintah instalasi di terminal.

npm install badrian-icon@latest
Langkah 02

Konfigurasi Tailwind CSS

Tambahkan path badrian-icon ke dalam tailwind.config.js agar warna dan dynamic class terdeteksi secara otomatis.

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/badrian-icon/**/*.js"
  ],
  safelist: [
    {
      pattern: /(bg|text|border)-(red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-(50|100|200|300|400|500|600|700|800|900|950)/,
    },
  ],
  theme: { extend: {} },
  plugins: [],
}
Langkah 03

Penggunaan Komponen

Impor ikon yang Anda butuhkan langsung dari sub-module library (seperti /kriston, /leonid, dll).

import { Add, Trash } from "badrian-icon/kriston";
import { Edit } from "badrian-icon/leonid";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      <Add className="w-6 h-6 text-emerald-500" />
      <Edit className="w-6 h-6 text-cyan-500" />
      <Trash className="w-6 h-6 text-rose-500" />
    </div>
  );
}

badrian-icon Interactive Playground

Test-drive the NPM icons, modify variables, and grab the JSX code

kriston/Add
1. Choose Icon (Add)
2. Accent Color
3. Motion Effects
4. Dimension Node48px
import { Add } from "badrian-icon/kriston";

<Add className="w-[48px] h-[48px] text-cyan-500 " />

badrian-icon dirilis di bawah lisensi MIT — Bebas digunakan untuk proyek pribadi maupun komersial.