gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
286 lines (276 loc) • 20 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main-v4.js"></script>
</head>
<body data-shell="admin" data-page="icons" data-breadcrumb="Home > UI > Icons">
<main class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Foundations</div>
<h1 class="page-title">Icons</h1>
</div>
<div class="page-actions">
<div class="search-box" style="width:240px">
<svg class="s-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
<input type="text" id="icon-search" placeholder="Search 120+ icons…" aria-label="Search icons" autocomplete="off">
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">Inline SVG icon set</div>
<div class="card-subtitle">24×24 viewBox · stroke 1.5 · click to copy name</div>
</div>
<div style="margin-left:auto;font-size:12px;color:var(--text-muted)" id="icon-count">120 icons</div>
</div>
<div class="card-body" id="icon-content"></div>
</div>
</div>
</main>
<script type="module">
const categories = {
'Navigation & layout': {
home: '<rect x="3" y="11" width="18" height="10" rx="1.5"/><path d="M3 11l9-7 9 7"/>',
grid: '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>',
menu: '<path d="M3 6h18M3 12h18M3 18h18"/>',
sidebar: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/>',
layout: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 9v12"/>',
columns: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/>',
rows: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 12h18"/>',
table: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M9 10v9M15 10v9"/>',
breadcrumb: '<path d="M4 12h6M14 6l6 6-6 6"/>',
arrow_up: '<path d="M12 19V5M5 12l7-7 7 7"/>',
arrow_down: '<path d="M12 5v14M5 12l7 7 7-7"/>',
arrow_left: '<path d="M19 12H5M12 5l-7 7 7 7"/>',
arrow_right: '<path d="M5 12h14M12 5l7 7-7 7"/>',
chevron_up: '<path d="M6 15l6-6 6 6"/>',
chevron_down: '<path d="M6 9l6 6 6-6"/>',
chevron_left: '<path d="M15 6l-6 6 6 6"/>',
chevron_right: '<path d="M9 6l6 6-6 6"/>',
external: '<path d="M14 3h7v7M21 3l-9 9"/><path d="M21 14v6a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1h6"/>',
expand: '<path d="M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-5"/>',
minimize: '<path d="M8 3v5H3M16 3v5h5M8 21v-5H3M16 21v-5h5"/>'
},
'Account & people': {
user: '<circle cx="12" cy="8" r="4"/><path d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/>',
users: '<circle cx="9" cy="8" r="4"/><circle cx="17" cy="9" r="3"/><path d="M2 20c0-3.9 3.1-7 7-7s7 3.1 7 7M22 20c0-2.5-2-5-5-5"/>',
user_plus: '<circle cx="9" cy="8" r="4"/><path d="M2 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/><path d="M19 7v6M16 10h6"/>',
user_check: '<circle cx="9" cy="8" r="4"/><path d="M2 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/><path d="M16 10l2 2 4-4"/>',
user_x: '<circle cx="9" cy="8" r="4"/><path d="M2 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/><path d="M17 8l5 5M22 8l-5 5"/>',
crown: '<path d="M3 18h18l-1.5-9-4 4L12 6l-3.5 7-4-4z"/>',
award: '<circle cx="12" cy="9" r="6"/><path d="M9 14l-2 7 5-3 5 3-2-7"/>',
shield_user: '<path d="M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6z"/><circle cx="12" cy="11" r="2.5"/><path d="M8 17a4 4 0 018 0"/>',
badge: '<circle cx="12" cy="9" r="5"/><path d="M9 13l-2 8 5-3 5 3-2-8"/>',
contacts: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="11" r="2.5"/><path d="M5 17c.6-1.7 2-3 4-3s3.4 1.3 4 3M15 8h4M15 12h4M15 16h2"/>'
},
'Files & data': {
file: '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/>',
file_text: '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M9 13h6M9 17h6"/>',
folder: '<path d="M3 7a2 2 0 012-2h4l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/>',
folder_plus: '<path d="M3 7a2 2 0 012-2h4l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/><path d="M12 11v6M9 14h6"/>',
archive: '<rect x="3" y="3" width="18" height="5" rx="1"/><path d="M5 8v11a2 2 0 002 2h10a2 2 0 002-2V8M9 13h6"/>',
download: '<path d="M12 3v12M6 11l6 6 6-6"/><path d="M3 21h18"/>',
upload: '<path d="M12 21V9M6 13l6-6 6 6"/><path d="M3 3h18"/>',
cloud: '<path d="M16 18a5 5 0 002-9.6A6 6 0 005 9a4 4 0 00-1 8h12z"/>',
cloud_up: '<path d="M16 18a5 5 0 002-9.6A6 6 0 005 9a4 4 0 00-1 8h2"/><path d="M12 21v-9M9 15l3-3 3 3"/>',
database: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v6c0 1.7 4 3 9 3s9-1.3 9-3V5M3 11v6c0 1.7 4 3 9 3s9-1.3 9-3v-6"/>',
server: '<rect x="2" y="4" width="20" height="6" rx="2"/><rect x="2" y="14" width="20" height="6" rx="2"/><circle cx="6" cy="7" r="0.5" fill="currentColor"/><circle cx="6" cy="17" r="0.5" fill="currentColor"/>',
chart: '<path d="M4 19V5M8 19v-8M12 19V9M16 19v-5M20 19v-9"/>',
chart_pie: '<path d="M21 12a9 9 0 11-9-9v9z"/>',
donut: '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/>',
activity: '<path d="M3 12h4l3-9 4 18 3-9h4"/>',
trending_up: '<path d="M3 17l6-6 4 4 8-8"/><path d="M21 7v6h-6"/>'
},
'Communication': {
mail: '<rect x="2" y="4" width="20" height="16" rx="3"/><path d="M2 7l10 6 10-6"/>',
inbox: '<path d="M2 13l4-9h12l4 9"/><path d="M2 13v6a1 1 0 001 1h18a1 1 0 001-1v-6h-6l-2 3h-4l-2-3z"/>',
send: '<path d="M22 2L2 9l8 4 4 9z"/><path d="M22 2L11 13"/>',
message: '<path d="M3 5h18v12H7l-4 4z"/>',
chat: '<path d="M21 11.5a8.4 8.4 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.4 8.4 0 01-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.4 8.4 0 013.8-.9h.5a8.5 8.5 0 018 8z"/>',
bell: '<path d="M12 3a6 6 0 00-6 6c0 6-3 7-3 7h18s-3-1-3-7a6 6 0 00-6-6z"/><path d="M10.5 21a1.5 1.5 0 003 0"/>',
bell_off: '<path d="M9 9a3 3 0 016 0c0 6 3 7 3 7H6s3-1 3-7zM3 3l18 18"/>',
phone: '<path d="M22 17v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3.1-8.7A2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .4 1.9.7 2.8a2 2 0 01-.4 2.1L8.1 9.9a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.4c.9.3 1.8.6 2.8.7a2 2 0 011.7 2z"/>',
video: '<rect x="2" y="6" width="13" height="12" rx="2"/><path d="M22 8l-7 4 7 4z"/>',
headphones: '<path d="M3 18v-7a9 9 0 0118 0v7"/><path d="M21 19a2 2 0 01-2 2h-1v-6h3zM3 19a2 2 0 002 2h1v-6H3z"/>',
at_sign: '<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 006 0v-1a10 10 0 10-3.92 8"/>'
},
'Actions': {
plus: '<path d="M12 4v16M4 12h16"/>',
minus: '<path d="M4 12h16"/>',
check: '<path d="M5 12l5 5 9-11"/>',
close: '<path d="M6 6l12 12M18 6L6 18"/>',
edit: '<path d="M16 3l5 5-12 12H4v-5z"/>',
edit_pen: '<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.1 2.1 0 113 3L12 15l-4 1 1-4z"/>',
trash: '<path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14"/>',
save: '<path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>',
copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 012-2h10"/>',
duplicate: '<rect x="3" y="3" width="13" height="13" rx="2"/><path d="M19 8a2 2 0 012 2v9a2 2 0 01-2 2h-9a2 2 0 01-2-2"/>',
refresh: '<path d="M3 12a9 9 0 0115-6.7L21 8M21 3v5h-5M21 12a9 9 0 01-15 6.7L3 16M3 21v-5h5"/>',
rotate: '<path d="M3 12a9 9 0 1015-6.7L21 3"/><path d="M21 3v5h-5"/>',
undo: '<path d="M3 7h12a5 5 0 010 10H8"/><path d="M7 11l-4-4 4-4"/>',
redo: '<path d="M21 7H9a5 5 0 000 10h7"/><path d="M17 11l4-4-4-4"/>',
play: '<polygon points="5 3 21 12 5 21 5 3"/>',
pause: '<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>',
stop: '<rect x="5" y="5" width="14" height="14" rx="2"/>',
skip_back: '<polygon points="20 5 8 12 20 19 20 5"/><line x1="5" y1="5" x2="5" y2="19"/>',
skip_fwd: '<polygon points="4 5 16 12 4 19 4 5"/><line x1="19" y1="5" x2="19" y2="19"/>'
},
'Status & alerts': {
info: '<circle cx="12" cy="12" r="10"/><path d="M12 11v5M12 8v.01"/>',
alert: '<path d="M12 2L1 22h22L12 2z"/><path d="M12 9v6M12 18v.01"/>',
error: '<circle cx="12" cy="12" r="10"/><path d="M9 9l6 6M15 9l-6 6"/>',
success: '<circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-7"/>',
help: '<circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/>',
bug: '<rect x="8" y="6" width="8" height="14" rx="4"/><path d="M12 6V3M9 5L7 3M15 5l2-2M5 13H3M5 17H3M5 9H3M19 13h2M19 17h2M19 9h2"/>',
fire: '<path d="M14 14a4 4 0 11-7 1c0-2 2-3 2-5a4 4 0 00-1-3 8 8 0 0110 12 4 4 0 01-4-5z"/>',
bolt: '<path d="M13 2L4 14h7l-1 8 9-12h-7z"/>'
},
'Commerce': {
cart: '<circle cx="9" cy="21" r="1.5"/><circle cx="20" cy="21" r="1.5"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/>',
bag: '<path d="M6 7V5a3 3 0 016 0M6 7H4l1 13a2 2 0 002 2h10a2 2 0 002-2l1-13h-2M6 7h12"/>',
tag: '<path d="M20 13l-7 7a2 2 0 01-2.83 0L3 12.83V4h8.83L20 12.17a2 2 0 010 2.83z"/><circle cx="7.5" cy="7.5" r="1.5"/>',
gift: '<rect x="3" y="8" width="18" height="13" rx="2"/><path d="M3 12h18M12 8v13"/><path d="M12 8C9 8 7 6 7 4a2 2 0 014 0c0 2-2 4 1 4M12 8c3 0 5-2 5-4a2 2 0 00-4 0c0 2 2 4-1 4"/>',
dollar: '<line x1="12" y1="2" x2="12" y2="22"/><path d="M16 6H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 010 7H7"/>',
credit_card: '<rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>',
receipt: '<path d="M5 21V3h14v18l-3-2-3 2-3-2-3 2-2-2z"/><path d="M9 8h6M9 12h6M9 16h4"/>',
package: '<path d="M21 16V8l-9-5-9 5v8l9 5 9-5z"/><path d="M3.3 7.3L12 12l8.7-4.7M12 22V12"/>'
},
'Tools': {
settings: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>',
sliders: '<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>',
tool: '<path d="M14.7 6.3a1 1 0 010 1.4l-1.4 1.4-3.4-3.4 1.4-1.4a1 1 0 011.4 0l2 2zM3 21l4-1 11-11-3-3L4 17l-1 4z"/>',
wand: '<path d="M15 4V2M15 16v-2M8 9H10M22 9H20M17.8 11.8L19 13M15 9h.01M17.8 6.2L19 5M3 21l9-9M12.2 6.2L11 5"/>',
paint: '<path d="M19 11H5a2 2 0 00-2 2v2a2 2 0 002 2h2v3a1 1 0 001 1h3a1 1 0 001-1v-3h7a2 2 0 002-2v-2a2 2 0 00-2-2z"/><path d="M19 11V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v6"/>',
brush: '<path d="M14.6 4.6L19 9l-9.5 9.5a3 3 0 01-4-4z"/><path d="M14 4l4-3 3 4-3 3-4-4z"/>',
code: '<path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/>',
terminal: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8l4 4-4 4M12 16h6"/>',
git: '<circle cx="12" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/><path d="M12 8v6M6 16V8a2 2 0 012-2h8M18 16v-2"/>',
layers: '<polygon points="12 2 2 7 12 12 22 7 12 2"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>',
box: '<path d="M21 16V8l-9-5-9 5v8l9 5 9-5z"/>',
cube: '<path d="M21 16V8l-9-5-9 5v8l9 5 9-5z"/><path d="M3.3 7.3L12 12l8.7-4.7M12 22V12"/>'
},
'Calendar & time': {
calendar: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M8 4v6M16 4v6"/>',
clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
hourglass: '<path d="M5 3h14M5 21h14M7 3v3a5 5 0 005 5 5 5 0 005-5V3M7 21v-3a5 5 0 015-5 5 5 0 015 5v3"/>',
timer: '<circle cx="12" cy="14" r="8"/><path d="M12 10v4M9 2h6M12 14L15 11"/>',
history: '<path d="M3 12a9 9 0 109-9 9 9 0 00-9 9z"/><path d="M3 12L1 10M12 7v5l3 3"/>',
repeat: '<polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/>'
},
'Visibility & state': {
eye: '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>',
eye_off: '<path d="M3 3l18 18M10.5 6.4A11 11 0 0123 12s-2 4-6 6.5M6 6c-3 2-5 6-5 6s4 8 11 8c1.7 0 3.2-.4 4.5-1"/><path d="M9.5 9.5a3 3 0 004 4"/>',
star: '<path d="M12 2l2.5 7.2 7.5.5-5.7 4.9 1.7 7.4L12 18l-6 3.7 1.7-7.4L2 9.7l7.5-.5z"/>',
heart: '<path d="M12 21s-7-4.5-9-9.5C1.5 7.5 4.5 4 8 4c2 0 3.5 1 4 2 .5-1 2-2 4-2 3.5 0 6.5 3.5 5 7.5-2 5-9 9.5-9 9.5z"/>',
bookmark: '<path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>',
lock: '<rect x="4" y="11" width="16" height="11" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/>',
unlock: '<rect x="4" y="11" width="16" height="11" rx="2"/><path d="M8 11V7a4 4 0 017.5-2"/>',
pin: '<line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17h14L17 9V5h1V3H6v2h1v4z"/>',
flag: '<path d="M5 21V4M5 4h12l-2 4 2 4H5"/>'
},
'Web & links': {
link: '<path d="M10 14l4-4M9 7H6a4 4 0 100 8h3M15 17h3a4 4 0 100-8h-3"/>',
unlink: '<path d="M18.8 13.4L15 17a4 4 0 01-5.7-5.7l1-1M9.7 9.7l-1 1M5.2 10.6L9 7a4 4 0 015.7 5.7l-1 1M3 3l18 18"/>',
share: '<circle cx="6" cy="12" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="18" cy="18" r="3"/><path d="M9 11l6-4M9 13l6 4"/>',
globe: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a14 14 0 010 20M12 2a14 14 0 000 20"/>',
rss: '<path d="M5 11a9 9 0 019 9M5 4a16 16 0 0116 16"/><circle cx="6" cy="19" r="1.5"/>',
wifi: '<path d="M5 13a10 10 0 0114 0M2 9a14 14 0 0120 0M9 17a4 4 0 016 0"/><circle cx="12" cy="20" r="0.5" fill="currentColor"/>',
bluetooth: '<path d="M7 7l10 10-5 5V2l5 5L7 17"/>',
cast: '<path d="M2 15a3 3 0 013 3M2 11a7 7 0 017 7M2 7a11 11 0 0111 11"/><circle cx="3" cy="20" r="0.5" fill="currentColor"/>'
},
'Search & filter': {
search: '<circle cx="11" cy="11" r="7"/><path d="M16 16l4 4"/>',
filter: '<path d="M3 4h18l-7 9v6l-4 2v-8z"/>',
sort: '<path d="M7 4v16M4 17l3 3 3-3M17 20V4M14 7l3-3 3 3"/>',
sort_az: '<path d="M3 6h12M3 12h9M3 18h6M17 6v12M21 14l-4 4-4-4"/>',
zoom_in: '<circle cx="11" cy="11" r="7"/><path d="M16 16l4 4M11 8v6M8 11h6"/>',
zoom_out: '<circle cx="11" cy="11" r="7"/><path d="M16 16l4 4M8 11h6"/>'
},
'Theme & weather': {
sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/>',
moon: '<path d="M21 13a9 9 0 11-9-9 7 7 0 009 9z"/>',
cloud_rain: '<path d="M16 13a4 4 0 002-7.5A6 6 0 005 9a3 3 0 00-1 6h11"/><path d="M8 19v2M12 18v3M16 19v2"/>',
snow: '<path d="M12 2v20M2 12h20M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"/>',
droplet: '<path d="M12 2c-3 5-8 9-8 14a8 8 0 1016 0c0-5-5-9-8-14z"/>',
thermometer: '<path d="M14 14V4a2 2 0 00-4 0v10a4 4 0 104 0z"/>'
},
'Misc': {
shield: '<path d="M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6z"/>',
map_pin: '<path d="M12 21s-7-7-7-12a7 7 0 1114 0c0 5-7 12-7 12z"/><circle cx="12" cy="9" r="3"/>',
map: '<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/>',
compass: '<circle cx="12" cy="12" r="10"/><polygon points="16 8 14 14 8 16 10 10 16 8"/>',
target: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',
rocket: '<path d="M5 13c-3 0-3 4-3 4s4 0 4-3M9 19a7 7 0 01-3-3M14 5l5 5-9 9-5-5z"/><path d="M14 5l3-3a3 3 0 014 4l-3 3"/>',
crown_alt: '<path d="M3 18h18l-1.5-9-4 4L12 6l-3.5 7-4-4z"/>',
music: '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
image: '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>',
camera: '<path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/>',
mic: '<rect x="9" y="2" width="6" height="13" rx="3"/><path d="M19 11a7 7 0 01-14 0M12 19v3M8 22h8"/>',
print: '<polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>'
}
};
const flat = [];
const root = document.getElementById('icon-content');
let total = 0;
const html = Object.entries(categories).map(([cat, items]) => {
total += Object.keys(items).length;
Object.keys(items).forEach((name) => flat.push(name));
return `
<div class="icon-category">${cat} <span style="opacity:.6;font-weight:400">· ${Object.keys(items).length}</span></div>
<div class="icon-grid">
${Object.entries(items).map(([name, body]) => `
<button type="button" class="icon-cell" data-name="${name}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">${body}</svg>
<span>${name}</span>
<span class="copied">Copied!</span>
</button>
`).join('')}
</div>
`;
}).join('');
root.innerHTML = html;
document.getElementById('icon-count').textContent = `${total} icons`;
// Click to copy name
root.addEventListener('click', async (e) => {
const cell = e.target.closest('.icon-cell');
if (!cell) return;
const name = cell.dataset.name;
try { await navigator.clipboard.writeText(name); } catch (_) { /* clipboard API unavailable */ }
cell.classList.add('was-copied');
setTimeout(() => cell.classList.remove('was-copied'), 900);
});
// Search filter
const search = document.getElementById('icon-search');
search.addEventListener('input', () => {
const q = search.value.trim().toLowerCase();
const cells = root.querySelectorAll('.icon-cell');
let visible = 0;
cells.forEach((c) => {
const match = !q || c.dataset.name.includes(q);
c.style.display = match ? '' : 'none';
if (match) visible++;
});
// Hide empty categories
root.querySelectorAll('.icon-category').forEach((cat) => {
const grid = cat.nextElementSibling;
const anyVisible = [...grid.querySelectorAll('.icon-cell')].some((c) => c.style.display !== 'none');
cat.style.display = anyVisible ? '' : 'none';
grid.style.display = anyVisible ? '' : 'none';
});
document.getElementById('icon-count').textContent = `${visible} of ${total} icons`;
});
</script>
</body>
</html>