Rekomendasi Icon Untuk Website Di Tahun 2022

Published on 24 Aug and it's getting updated on 31 Aug

Written by Irsyad A. Panjaitan

Fill in HTMLPackage

ArticlesRekomendasi Icon Untuk Website Di Tahun 2022

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>
    );
}

Heroicons

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 <ix> seperti:

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

Bootstrap Icon

Tabler Icons

Tabler Icons adalah icon yang dibuat oleh Paweł Kuna, yang mana tabler icons sendiri mempunyai kurang lebih 2300 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 --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 seperti:

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

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

Tabler icons

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

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
1

Share on

Parsinta is a Trademark of Irsyad A. Panjaitan.

© Copyright 2022 Parsinta. All rights reserved. Yes, all of them (EC00202255558).