Cara memakai ikon SVG di HTML, CSS, React, dan Vue

Ikon SVG adalah file vektor berukuran kecil: tetap tajam di ukuran berapa pun, hanya beberapa ratus byte, dan warnanya bisa diubah dengan CSS. Ada empat cara umum untuk menaruhnya di halaman. Mana yang cocok tergantung apakah Anda perlu mengatur gaya ikon, berapa banyak ikon di halaman, dan framework yang Anda pakai.

1. Menautkan SVG dengan tag <img>

Cara paling sederhana: perlakukan ikon seperti gambar biasa. Setiap ikon di Iconyz punya URL SVG publik yang tampil di panel ikon.

<img src="https://iconyz.com/api/public/svg/lucide/house.svg"
     width="24" height="24" alt="Beranda">

Browser menyimpan file di cache, dan ikon tidak pernah menghambat tampilan HTML. Kekurangannya, CSS tidak bisa menjangkau bagian dalam gambar, jadi gaya color dan :hover tidak berpengaruh. Untuk ikon satu warna, Anda bisa menentukan warna lewat URL: tambahkan ?color=%23e11d48 (#e11d48 yang di-encode untuk URL). Detailnya ada di panduan API SVG.

Untuk aplikasi produksi, pertimbangkan untuk mengunduh SVG dan menyajikannya dari situs Anda sendiri agar halaman tidak bergantung pada URL pihak ketiga.

2. Menempelkan SVG secara inline

Buka ikon, pilih SVG, lalu salin kodenya langsung ke HTML Anda:

<button class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
       aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…"/>
  </svg>
  Beranda
</button>

SVG inline menjadi bagian dari halaman, jadi CSS mengendalikannya sepenuhnya: warna, ukuran, efek hover, transisi, bahkan path satu per satu. Set satu warna memakai currentColor, sehingga ikon otomatis mengikuti warna teks elemen induknya. Ini opsi paling fleksibel dan tidak butuh request HTTP tambahan.

Harganya adalah ukuran HTML. Setiap ikon inline menambahkan data path ke setiap halaman yang memakainya, dan ini terasa jika ikon yang sama diulang ratusan kali, misalnya di tabel panjang.

3. Memakai ikon dari CSS

CSS mask mengubah SVG satu warna menjadi bentuk yang diisi dengan background-color, sehingga ikon mengikuti warna teks tanpa markup di HTML:

.icon-home {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
          mask: url("https://iconyz.com/api/public/svg/lucide/house.svg") no-repeat center / contain;
}

<span class="icon-home" aria-hidden="true"></span>

Tab CSS di panel setiap ikon membuat aturan ini dengan SVG yang ditanam sebagai data URI, jadi berfungsi tanpa request eksternal. Pakai mask hanya untuk ikon satu warna: mask mempertahankan bentuk dan membuang warna asli ikon. Untuk ikon multiwarna, gunakan background-image.

4. React dan framework JSX lainnya

JSX membutuhkan atribut camelCase (strokeWidth, bukan stroke-width) dan meneruskan props. Tab React di panel setiap ikon menghasilkan komponen yang siap pakai:

export function HouseIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
         viewBox="0 0 24 24" {...props}>
      <path fill="none" stroke="currentColor" strokeWidth={2} d="…" />
    </svg>
  );
}

// Penggunaan
<HouseIcon className="text-blue-600" style={{ fontSize: 20 }} aria-hidden="true" />

Karena ukurannya 1em, ikon ikut membesar atau mengecil bersama font-size, dan karena warnanya currentColor, kelas utilitas seperti text-* di Tailwind bisa mengubah warnanya. Simpan satu file per ikon atau kelompokkan ikon dalam satu modul agar bundler bisa membuang ikon yang tidak diimpor (tree-shaking). Komponen yang sama juga berjalan di Preact, dan tab Solid menyediakan versi untuk Solid.

5. Vue dan Svelte

Di Vue, simpan ikon sebagai single-file component. Atribut yang Anda berikan, seperti class, diteruskan ke <svg> akar:

<!-- HouseIcon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="none" stroke="currentColor" stroke-width="2" d="…" />
  </svg>
</template>

Svelte bekerja dengan cara yang sama: file .svelte berisi markup SVG dengan {...$$props} pada elemen akar. Keduanya tersedia sebagai tab di panel ikon.

Ukuran dan warna

• Atur ukuran dengan 1em. Dengan lebar dan tinggi 1em, ikon menyesuaikan ukuran teks di sebelahnya. Ubah font-size untuk mengubah ukurannya.
• Pertahankan viewBox. viewBox menentukan sistem koordinat gambar. Menghapusnya merusak penskalaan; ubah ukuran lewat lebar dan tinggi.
• Sesuaikan dengan grid. Ikon yang digambar di grid 24 px paling tajam di 24 px, 48 px, atau kelipatannya. Di 18 atau 20 px, garis tipis bisa terlihat sedikit buram.
• Warnai ikon satu warna dengan color. Dengan currentColor, satu aturan CSS cukup untuk keadaan normal, hover, dan mode gelap.
• Ikon multiwarna mempertahankan paletnya. Emoji, bendera, dan logo sudah punya warna bawaan. Ubah warnanya hanya jika lisensinya mengizinkan modifikasi, dan jangan pernah mengubah logo merek.

Aksesibilitas

Tentukan apakah ikon punya makna. Ikon dekoratif di samping label teks sebaiknya disembunyikan dari pembaca layar, sedangkan ikon yang berdiri sendiri perlu alternatif teks:

<!-- Dekoratif: tombol sudah punya label teks -->
<button><svg aria-hidden="true" …>…</svg> Simpan</button>

<!-- Tombol hanya ikon: beri label pada tombol, sembunyikan ikon -->
<button aria-label="Tutup"><svg aria-hidden="true" …>…</svg></button>

<!-- Gambar yang bermakna -->
<img src="…/triangle-alert.svg" alt="Peringatan">

Periksa juga kontrasnya: menurut WCAG 2.2, ikon yang menyampaikan informasi perlu rasio kontras minimal 3:1 terhadap latarnya.

Metode mana yang dipilih?

Siap mulai? Cari di semua set ikon, atau jelajahi set populer seperti Lucide, Tabler Icons, dan Material Design Icons. Sebelum rilis, periksa lisensi set tersebut; panduan lisensi ikon menjelaskan syarat masing-masing.