Dokumentasi Ziro Icon

Panduan lengkap untuk menginstal, menggunakan, dan mengkustomisasi icon SVG Ziro Icon di proyek Anda.

Ziro Icon adalah kumpulan 114 icon SVG yang ringan, bebas dependensi, dan menggunakan currentColor sehingga warnanya bisa dikontrol sepenuhnya via CSS.

home

edit-2

lock

heart

zap

Instalasi

Ada 3 cara untuk mendapatkan icon Ziro Icon ke proyek Anda. Pilih yang paling sesuai dengan alur kerja Anda.

Direkomendasikan

Download ZIP

Unduh semua icon sekaligus dalam file ZIP terstruktur per kategori.

Copy-Paste

Copy SVG Langsung

Klik icon di halaman koleksi untuk langsung menyalin kode SVG ke clipboard.

Manual

File Per-Icon

Dobel-klik icon di halaman koleksi lalu tekan "Download" untuk mengunduh satu file SVG.

CDN

Host di CDN

Upload file SVG ke CDN atau server Anda, lalu akses via URL gambar.

Metode 1: Download ZIP

Kunjungi halaman koleksi icon, lalu klik tombol "Download ZIP" di hero section atau navbar. File ZIP berisi:

/all/ — Semua icon dalam satu folder
/Arrows/, /UI/, /Media/ ... — Icon dikelompokkan per kategori
README.md — File penjelasan

Jika Anda memfilter kategori tertentu sebelum download, file ZIP hanya akan berisi icon dari kategori tersebut.

Metode 2: Copy-Paste dari Halaman Koleksi

Buka halaman koleksi icon

Navigasikan ke halaman utama dan temukan icon yang Anda butuhkan.

Klik icon untuk menyalin

Klik sekali pada icon — kode SVG langsung disalin ke clipboard Anda. Akan muncul notifikasi "Tersalin".

Tempel ke proyek Anda

Gunakan Ctrl+V / Cmd+V untuk menempelkan kode SVG ke file HTML, JSX, atau komponen Anda.

Gunakan dobel-klik untuk membuka modal preview jika Anda ingin melihat kode SVG lengkap sebelum menyalin.

Metode 3: Host di CDN / Server

Setelah mengunduh file ZIP, ekstrak dan upload folder icon ke server atau CDN Anda. Kemudian gunakan sebagai gambar:

HTML

<!-- Gunakan sebagai gambar -->
<img src="/icons/home.svg" alt="Home" width="24" height="24">

<!-- Atau sebagai background CSS -->
<div style="background: url('/icons/home.svg') no-repeat center; width: 24px; height: 24px;"></div>

<!-- Atau inline via CSS mask (warna bisa diubah) -->
<style>
  .icon-home {
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask-image: url('/icons/home.svg');
    mask-image: url('/icons/home.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
</style>
<div class="icon-home"></div>

Penggunaan Dasar

Cara paling umum menggunakan icon SVG Ziro Icon di halaman HTML.

Inline SVG (Direkomendasikan)

Tempel kode SVG langsung ke HTML. Ini memberikan kontrol penuh atas styling:

HTML

<!-- Contoh: icon home -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
  stroke-linecap="round" stroke-linejoin="round">
  <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
  <polyline points="9 22 9 12 15 12 15 22"/>
</svg>

Dalam Elemen Interaktif

HTML

<!-- Tombol dengan icon -->
<button style="display:inline-flex;align-items:center;gap:8px;padding:10px 20px;">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round" width="18" height="18">
    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
    <polyline points="7 10 12 15 17 10"/>
    <line x1="12" y1="15" x2="12" y2="3"/>
  </svg>
  Download
</button>

<!-- Link navigasi dengan icon -->
<a href="/settings" style="display:inline-flex;align-items:center;gap:6px;color:#525252;">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-2.82 1.18V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1.08-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9c.26.604.852.997 1.51 1H21a2 2 0 010 4h-.09c-.658.003-1.25.396-1.51 1z"/>
  </svg>
  Pengaturan
</a>

Sprite SVG (Untuk Banyak Icon)

Jika halaman Anda menggunakan banyak icon, gabungkan menjadi satu SVG sprite untuk mengurangi HTTP request:

HTML

<!-- Definisikan sprite (bisa di <body> paling atas, tersembunyi) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
    <polyline points="9 22 9 12 15 12 15 22"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
  </symbol>
  <symbol id="icon-settings" viewBox="0 0 24 24">
    <!-- path icon settings di sini -->
  </symbol>
</svg>

<!-- Gunakan di mana saja -->
<svg width="24" height="24">
  <use href="#icon-home" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"/>
</svg>

<svg width="20" height="20">
  <use href="#icon-search" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Dengan sprite, Anda hanya perlu mendefinisikan path icon satu kali dan bisa menggunakannya berulang kali dengan ukuran berbeda tanpa duplikasi kode.

Ukuran

Icon SVG bisa diatur ukurannya dengan atribut width dan height, atau via CSS.

HTML

<!-- Via atribut width & height -->
<svg width="16" height="16" viewBox="0 0 24 24" ...>...</svg>  <!-- 16px -->
<svg width="20" height="20" viewBox="0 0 24 24" ...>...</svg>  <!-- 20px -->
<svg width="24" height="24" viewBox="0 0 24 24" ...>...</svg>  <!-- 24px -->
<svg width="32" height="32" viewBox="0 0 24 24" ...>...</svg>  <!-- 32px -->
<svg width="48" height="48" viewBox="0 0 24 24" ...>...</svg>  <!-- 48px -->

CSS

/* Via CSS — lebih fleksibel */
.icon {
  width: 1.5rem;   /* 24px */
  height: 1.5rem;
}

.icon-sm { width: 1rem; height: 1rem; }    /* 16px */
.icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */
.icon-lg { width: 2rem; height: 2rem; }    /* 32px */
.icon-xl { width: 3rem; height: 3rem; }    /* 48px */

Jangan mengubah atribut viewBox. viewBox "0 0 24 24" harus tetap apa adanya agar icon tidak terdistorsi. Yang diubah hanya width dan height.

Warna

Semua icon Ziro Icon menggunakan currentColor yang secara otomatis mengikuti properti color dari CSS parent. Ini berarti Anda bisa mengubah warna hanya dengan CSS.

HTML

<!-- Warna mengikuti parent -->
<span style="color: #0a0a0a;">
  <svg viewBox="0 0 24 24" ...>...</svg>  <!-- Hitam -->
</span>

<span style="color: #2563eb;">
  <svg viewBox="0 0 24 24" ...>...</svg>  <!-- Biru -->
</span>

<span style="color: #dc2626;">
  <svg viewBox="0 0 24 24" ...>...</svg>  <!-- Merah -->
</span>

<span style="color: #16a34a;">
  <svg viewBox="0 0 24 24" ...>...</svg>  <!-- Hijau -->
</span>

Warna Interaktif dengan CSS

CSS

/* Icon default abu-abu, hitam saat hover */
.nav-icon {
  color: #a3a3a3;
  transition: color 0.2s ease;
}

.nav-icon:hover {
  color: #0a0a0a;
}

/* Icon aktif */
.nav-icon.active {
  color: #2563eb;
}

/* Warna berbeda di dark mode */
@media (prefers-color-scheme: dark) {
  .nav-icon {
    color: #a3a3a3;
  }
  .nav-icon:hover {
    color: #ffffff;
  }
}

Karena menggunakan currentColor, icon otomatis menyesuaikan dengan color teks di sekitarnya. Ini membuatnya sempurna untuk tombol, link, dan elemen UI lainnya tanpa styling tambahan.

Stroke & Fill

Ziro Icon menggunakan stroke-based design secara default. Anda bisa mengubah ketebalan garis atau mengubah menjadi filled style.

Mengubah Ketebalan Stroke

HTML

<!-- Tipis (default) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
  stroke-linecap="round" stroke-linejoin="round">...</svg>

<!-- Normal -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
  stroke-linecap="round" stroke-linejoin="round">...</svg>

<!-- Tebal -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
  stroke-linecap="round" stroke-linejoin="round">...</svg>

Mengubah Menjadi Filled

Ganti fill="none" menjadi fill="currentColor" dan hapus atribut stroke:

HTML

<!-- Stroke (default) -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
  stroke-linecap="round" stroke-linejoin="round">
  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06
    a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78
    1.06-1.06a5.5 5.5 0 000-7.78z"/>
</svg>

<!-- Filled -->
<svg viewBox="0 0 24 24" fill="currentColor">
  <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06
    a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78
    1.06-1.06a5.5 5.5 0 000-7.78z"/>
</svg>

Beberapa icon (seperti GitHub, YouTube, dll.) sudah menggunakan fill="currentColor" karena sifat logo brand mereka. Jangan mengubah atribut fill pada icon tersebut.

Penggunaan di React

Cara mengkonversi SVG Ziro Icon menjadi komponen React.

Komponen Dasar

JSX

// components/IconHome.jsx
const IconHome = ({ size = 24, color = "currentColor", ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke={color}
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...props}
  >
    <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </svg>
);

export default IconHome;

Pattern Reusable (Direkomendasikan)

JSX

// components/Icon.jsx
const Icon = ({ children, size = 24, color = "currentColor", ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke={color}
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...props}
  >
    {children}
  </svg>
);

export default Icon;

// --- Penggunaan ---
import Icon from "./components/Icon";

const HomeIcon = (props) => (
  <Icon {...props}>
    <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </Icon>
);

// Di halaman
<HomeIcon size={20} />
<HomeIcon size={32} color="#2563eb" />

Menggunakan SVG sebagai Data Path

JSX

// icons.js — Simpan semua path di satu file
export const icons = {
  home: {
    paths: (
      <>
        <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
        <polyline points="9 22 9 12 15 12 15 22" />
      </>
    ),
  },
  search: {
    paths: (
      <>
        <circle cx="11" cy="11" r="8" />
        <line x1="21" y1="21" x2="16.65" y2="16.65" />
      </>
    ),
  },
  // ... tambahkan icon lainnya
};

// ZiroIcon.jsx
import { icons } from "./icons";

const ZiroIcon = ({ name, size = 24, color = "currentColor", ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke={color}
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...props}
  >
    {icons[name]?.paths}
  </svg>
);

export default ZiroIcon;

// Penggunaan: <ZiroIcon name="home" size={20} color="#dc2626" />

Penggunaan di Vue

Cara menggunakan Ziro Icon dalam proyek Vue 3.

Vue SFC

<!-- components/ZiroIcon.vue -->
<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    :stroke="color"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    v-bind="$attrs"
  >
    <slot />
  </svg>
</template>

<script setup>
defineProps({
  size: { type: [Number, String], default: 24 },
  color: { type: String, default: "currentColor" },
});
</script>

Vue SFC

<!-- icons/IconHome.vue -->
<template>
  <ZiroIcon v-bind="$attrs">
    <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
    <polyline points="9 22 9 12 15 12 15 22" />
  </ZiroIcon>
</template>

<script setup>
import ZiroIcon from "./ZiroIcon.vue";
</script>

<!-- Penggunaan di halaman -->
<IconHome :size="20" />
<IconHome :size="32" color="#16a34a" />

Figma Plugin

Cara menggunakan Ziro Icon di dalam Figma untuk workflow desain.

Download file SVG

Unduh icon yang diinginkan dari halaman koleksi, atau download semua dalam format ZIP.

Drag & Drop ke Figma

Drag file .svg langsung ke canvas Figma. Figma akan otomatis mengimport sebagai vector layer.

Atur sebagai Component

Pilih layer icon, klik kanan → "Create Component". Simpan di team library untuk digunakan ulang.

Override warna

Karena icon menggunakan stroke, Anda bisa mengubah warna melalui panel Fill/Stroke di Figma tanpa mengubah bentuk.

Untuk hasil terbaik, setelah import pastikan Stroke Cap dan Stroke Join diatur ke "Round" agar sesuai dengan desain asli icon.

Daftar Kategori

Seluruh 114 icon dikelompokkan ke dalam 12 kategori berikut:

Kategori	Jumlah	Contoh Icon
Arrows	12	arrow-up, chevron-right, refresh-cw, expand
UI	16	home, settings, menu, search, filter, grid, list
Media	12	play, pause, volume-2, camera, image, video
Komunikasi	8	mail, message-circle, send, bell, phone, users
File	10	file, folder, copy, download, upload, trash-2
Sosial	8	heart, star, thumbs-up, share-2, bookmark, eye
Sosial Media	15	github, twitter, facebook, instagram, youtube
Developer	10	code, terminal, database, git-branch, server
Weather	6	sun, cloud, cloud-rain, cloud-snow, wind
Navigasi	6	map-pin, compass, globe, map, navigation
Keamanan	8	lock, shield, key, alert-triangle, zap
Editor	11	edit-2, bold, italic, link, align-left
Lainnya	18	clock, calendar, shopping-cart, layers, bar-chart

Optimasi

Tips untuk memastikan icon tetap ringan dan performant di produksi.

1. Gunakan SVG Sprite

Gabungkan icon yang sering dipakai menjadi satu file sprite untuk mengurangi ukuran total dan jumlah request.

2. Minifikasi SVG

Hapus whitespace, newline, dan metadata yang tidak perlu. Gunakan tool seperti svgo:

Bash

# Install SVGO
npm install -g svgo

# Minifikasi satu file
svgo home.svg -o home.min.svg

# Minifikasi seluruh folder
svgo -f ./icons -o ./icons-min

3. Lazy Load Icon

Jika halaman memiliki sangat banyak icon, pertimbangkan untuk lazy load icon yang tidak terlihat di viewport:

HTML

<!-- Gunakan loading="lazy" untuk SVG sebagai gambar -->
<img src="/icons/chart.svg" alt="Chart" loading="lazy" width="24" height="24">

4. Hindari Duplikasi

Jangan menempelkan kode SVG yang sama berulang-ulang di satu halaman. Gunakan komponen (React/Vue) atau SVG sprite sebagai pengganti.

Setiap icon Ziro Icon rata-rata hanya 200-500 byte sebelum minifikasi. Sangat ringan dibandingkan icon font yang bisa mencapai 50-200KB.

FAQ

Pertanyaan yang sering diajukan tentang Ziro Icon.

Apa itu `currentColor`?

currentColor adalah nilai CSS bawaan yang merepresentasikan nilai properti color dari elemen parent. Ketika stroke SVG diatur ke currentColor, warna icon otomatis mengikuti warna teks di sekitarnya. Ini memungkinkan perubahan warna hanya dengan CSS tanpa mengubah kode SVG.

Apakah Ziro Icon kompatibel dengan semua browser?

Ya. Icon menggunakan SVG 1.1 dengan fitur dasar (path, polyline, circle, line, rect, polygon, ellipse) yang didukung oleh semua browser modern termasuk IE11.

Bisakah saya menggunakan Ziro Icon di proyek komersial?

Ya. Ziro Icon dirilis di bawah lisensi MIT, yang berarti Anda bebas menggunakannya untuk proyek pribadi maupun komersial tanpa batasan.

Mengapa SVG lebih baik dari icon font?

Aspek	SVG	Icon Font
Ukuran	Hanya icon yang dipakai yang dimuat	Seluruh font dimuat (~50-200KB)
Warna	Multi-warna, gradien, opacity	Hanya 1 warna per icon
Rendering	Crisp di semua resolusi	Bisa blur pada resolusi tertentu
Aksesibilitas	Bisa diberi title, desc, aria-label	Terbaca sebagai karakter aneh oleh screen reader
Styling	CSS penuh (hover, animasi, transform)	Terbatas
FOUC	Tidak ada	Bisa muncul karakter sebelum font loaded

Apakah ada versi filled/solid?

Ziro Icon didesain dalam gaya stroke/outline secara default. Untuk mendapatkan versi filled, Anda bisa mengubah atribut fill="none" menjadi fill="currentColor" dan menghapus atribut stroke. Lihat bagian Stroke & Fill untuk detailnya.

Bagaimana cara mengubah warna satu bagian icon?

Untuk icon yang memiliki beberapa elemen (misalnya toggle), Anda bisa memberikan warna berbeda dengan mengubah stroke atau fill pada elemen child tertentu:

HTML

<svg viewBox="0 0 24 24" fill="none" stroke-width="2"
  stroke-linecap="round" stroke-linejoin="round" width="24" height="24">
  <!-- Track abu-abu -->
  <rect x="1" y="5" width="22" height="14" rx="7"
    stroke="#d4d4d4" />
  <!-- Thumb hijau -->
  <circle cx="16" cy="12" r="3"
    fill="#16a34a" stroke="#16a34a" />
</svg>

Masih punya pertanyaan? Buka README.md atau lihat kembali koleksi icon.

Membangun Aplikasi Blogger & Spreadsheet Terintegrasi

Aan Fauzi

Apa yang Bisa Saya Bantu

Custom Blogger Template

Spreadsheet sebagai Database

Aplikasi Form & Input

Mini E-Commerce / Katalog

Dashboard & Reporting

Maintenance & Support

Paket Proyek Transparan

Basic App

Full App

Custom Solution

Proses Pengerjaan Proyek

Konsultasi

Desain & Prototype

Development

Launch & Support

Apa Kata Klien Saya

Testimoni Baru

Punya Ide Aplikasi?Mari Wujudkan Bersama.

Dokumentasi Ziro Icon

Instalasi

Download ZIP

Copy SVG Langsung

File Per-Icon

Host di CDN

Metode 1: Download ZIP

Metode 2: Copy-Paste dari Halaman Koleksi

Buka halaman koleksi icon

Klik icon untuk menyalin

Tempel ke proyek Anda

Metode 3: Host di CDN / Server

Penggunaan Dasar

Inline SVG (Direkomendasikan)

Dalam Elemen Interaktif

Sprite SVG (Untuk Banyak Icon)

Ukuran

Warna

Warna Interaktif dengan CSS

Stroke & Fill

Mengubah Ketebalan Stroke

Mengubah Menjadi Filled

Penggunaan di React

Komponen Dasar

Pattern Reusable (Direkomendasikan)

Menggunakan SVG sebagai Data Path

Penggunaan di Vue

Figma Plugin

Download file SVG

Drag & Drop ke Figma

Atur sebagai Component

Override warna

Daftar Kategori

Optimasi

1. Gunakan SVG Sprite

2. Minifikasi SVG

3. Lazy Load Icon

4. Hindari Duplikasi

FAQ

Apa itu currentColor?

Apakah Ziro Icon kompatibel dengan semua browser?

Bisakah saya menggunakan Ziro Icon di proyek komersial?

Mengapa SVG lebih baik dari icon font?

Apakah ada versi filled/solid?

Bagaimana cara mengubah warna satu bagian icon?

Membangun Aplikasi
Blogger & Spreadsheet
Terintegrasi

Punya Ide Aplikasi?
Mari Wujudkan Bersama.

Apa itu `currentColor`?