Ikon
Kit ini tidak membundel paket ikon. Ikon ditulis sebagai SVG sebaris (inline) — nol permintaan jaringan, bisa diwarnai lewat currentColor. Set asalnya Lucide (yang dipakai project asli).
Ukuran baku
Ukuran ikut konteks: 12px di lencana, 16px di tombol & sidebar, 20px di topbar, 24px di keadaan kosong.
Lihat kode
<div class="ck-row ck-row-4 ck-wrap ck-muted"> <span style="width:12px;height:12px;display:block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 6 9 17l-5-5"/></svg></span> <span style="width:16px;height:16px;display:block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></span> <span style="width:20px;height:20px;display:block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg></span> <span style="width:24px;height:24px;display:block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5M3 12a9 3 0 0 0 18 0"/></svg></span> </div>
Ikon yang dipakai di aplikasi
Kumpulan ikon yang benar-benar muncul di inner-classroom. Salin SVG-nya apa adanya.
plus
download
trash
check
x
search
bell
users
school
chart
clock
file
database
trophy
shield
info
alert
xcircle
checkcircle
chevdown
chevleft
logout
user
sparkles
Lihat kode
<div class="ck-grid ck-grid-4"> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M12 5v14"/></svg></span><span class="ck-text-xs ck-mono">plus</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg></span><span class="ck-text-xs ck-mono">download</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg></span><span class="ck-text-xs ck-mono">trash</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 6 9 17l-5-5"/></svg></span><span class="ck-text-xs ck-mono">check</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></span><span class="ck-text-xs ck-mono">x</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span><span class="ck-text-xs ck-mono">search</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></span><span class="ck-text-xs ck-mono">bell</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg></span><span class="ck-text-xs ck-mono">users</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 22v-4a2 2 0 1 0-4 0v4M18 10l4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2M18 5v17M6 5v17M4 6l8-4 8 4"/></svg></span><span class="ck-text-xs ck-mono">school</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 3v18h18M18 17V9M13 17V5M8 17v-3"/></svg></span><span class="ck-text-xs ck-mono">chart</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span><span class="ck-text-xs ck-mono">clock</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v6h6"/></svg></span><span class="ck-text-xs ck-mono">file</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5M3 12a9 3 0 0 0 18 0"/></svg></span><span class="ck-text-xs ck-mono">database</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0z"/></svg></span><span class="ck-text-xs ck-mono">trophy</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg></span><span class="ck-text-xs ck-mono">shield</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg></span><span class="ck-text-xs ck-mono">info</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg></span><span class="ck-text-xs ck-mono">alert</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg></span><span class="ck-text-xs ck-mono">xcircle</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></span><span class="ck-text-xs ck-mono">checkcircle</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg></span><span class="ck-text-xs ck-mono">chevdown</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m15 18-6-6 6-6"/></svg></span><span class="ck-text-xs ck-mono">chevleft</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></span><span class="ck-text-xs ck-mono">logout</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span><span class="ck-text-xs ck-mono">user</span></div> <div class="ck-row ck-row-2"><span style="width:16px;height:16px;display:block" class="ck-muted"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg></span><span class="ck-text-xs ck-mono">sparkles</span></div> </div>