Rekomendasi Icon Terbaik untuk Website Anda

Dalam artikel ini saya akan memberi tahu beberapa icon untuk website di tahun 2022 ini. Masing-masing dari icon akan saya review dan akan saya beri nilai plus dan minus nya.

¶Heroicons

Heroicons adalah icon yang dibuat oleh salah satu pendiri Tailwind CSS yaitu Steve Schoger, icon ini cukup elegan dan populer, banyak yang sudah memakai nya. Kebetulan pada saat saya menulis artikel ini, icon ini baru saja di perbarui menjadi v2.0.0 yang itu kurang lebih 260 icon di buat ulang oleh Steve. Tampilan nya cukup elegan, namun kurang lengkap. Seperti misalnya brand logo dari beberapa vendor seperti react, vue tidak ada di dalam heroicons ini. Tidak hanya itu, sosial media juga tidak ada.

Untuk menggunakan icon ini, bisa langsung di copy dari official web nya, atau bisa di pakai menggunakan npm seperti:

npm install @heroicons/react

Untuk contoh penggunaannya bisa langsung di seperti:

import { BeakerIcon } from '@heroicons/react/24/solid';

function MyComponent() {
    return (
        <div>
            <BeakerIcon className='h-6 w-6 text-blue-500' />
            <p>...</p>
        </div>
    );
}

¶Justd Icons

Justd Icons adalah icon library yang di rancang oleh @irsyadadl, yang terbagi dalam 2 bagian, yaitu outline dan solid.

Untuk menggunakan icon ini cukup mudah.

npm i justd-icons

Anda bisa memilih antara outline dan juga solid.

import { IconShoppingBag } from 'justd-icons';

const App = () => {
  return < IconShoppingBag />;
};

export default App;

import { IconShoppingBagFill } from 'justd-icons';

const App = () => {
  return < IconShoppingBagFill />;
};

export default App;

Dan jika Anda ingin menggunakan tailwind css, mudah saja tinggal hanya menambah class seperti:

<IconShoppingBag className='size-5' />

¶Bootstrap Icon

Bagi yang sudah sering memakai bootstrap harusnya sudah tidak asing lagi dengan icon ini. Karena ini juga dibuat di official website dari bootstrap sendiri. Tampilan juga bagus, dan lumayan lengkap. Seperti brand sosial media, atau bahkan vendor seperti react, js, css sudah ada dalam icon ini.

Untuk menggunakan icon ini sangat simple sekali. Bisa dengan menggunakan svg, atau bahkan menggunakan tag seperti <i>. Icon ini juga bisa di import ke project kita dengan menggunakan npm seperti:

npm i bootstrap-icons

Kemudian untuk menggunakannya sangat mudah sekali, cukup import css nya dan gunakan dengan tag <i/> seperti:

import 'bootstrap-icons/font/bootstrap-icons.css'
function MyComponent() {
    return (
        <div>
            <i class="bi bi-arrows-angle-expand"></i>
            <p>...</p>
        </div>
    );
}

¶Tabler Icons

Tabler Icons adalah icon yang dibuat oleh Paweł Kuna, yang mana tabler icons sendiri mempunyai kurang lebih 3200 icon yang sudah siap untuk di pakai, bahkan jika di banding jumlah dengan heroicons, icon ini jauh lebih unggul.

Brand seperti sosial media dan juga vendor-vendor beberapa framework dan bahasa pemrograman juga sudah ada di dalam icon ini. Bahkan parsinta sendiri menggunakan icons ini, kenapa ? Ya karena ini adalah salah satu icon favorit saya untuk saat ini.

Untuk menggunakan icon nya cukup mudah, bisa dengan langsung mengkopi dari official site nya, atau juga bisa di import ke project kita melalui npm seperti:

npm install @tabler/icons-react --save

Untuk menggunakan bisa dengan berbagai macam cara, bisa dengan image seperti:

<img src="path/to/icon.svg" alt="icon title" />

Atau bisa juga dengan css seperti:

.icon-tabler {
    color: red;
    width: 32px;
    height: 32px;
    stroke-width: 1.25;
}

Atau bahkan dengan component react seperti:

import { IconAward } from '@tabler/icons-react';

const MyComponent = () => {
    return (
        <IconAward
            size={36}
            color='red'
            stroke={3}
            strokeLinejoin='miter'
        />
    );
};

Semoga artikel ini dapat bermanfaat untuk Anda, dan saya Irsyad. Until next time 👋🏻