Rekomendasi Icon Untuk Website

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:

1npm install @heroicons/react
2
bashCopy

Untuk contoh penggunaannya bisa langsung di seperti:

1import { BeakerIcon } from '@heroicons/react/24/solid';
2
3function MyComponent() {
4    return (
5        <div>
6            <BeakerIcon className='h-6 w-6 text-blue-500' />
7            <p>...</p>
8        </div>
9    );
10}
11
jsxCopy

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:

1npm i bootstrap-icons
2
bashCopy

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

1import 'bootstrap-icons/font/bootstrap-icons.css'
2function MyComponent() {
3    return (
4        <div>
5            <i class="bi bi-arrows-angle-expand"></i>
6            <p>...</p>
7        </div>
8    );
9}
10
jsxCopy

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:

1npm install @tabler/icons-react --save
2
bashCopy

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

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

Atau bisa juga dengan css seperti:

1.icon-tabler {
2    color: red;
3    width: 32px;
4    height: 32px;
5    stroke-width: 1.25;
6}
7
cssCopy

Atau bahkan dengan component react seperti:

1import { IconAward } from '@tabler/icons-react';
2
3const MyComponent = () => {
4    return (
5        <IconAward
6            size={36}
7            color='red'
8            stroke={3}
9            strokeLinejoin='miter'
10        />
11    );
12};
13
bashCopy

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