22 lines
2.7 KiB
HTML
22 lines
2.7 KiB
HTML
|
<!doctype html><html><head><meta charset="utf-8"><title>Iconography</title><link rel="stylesheet" href="_card.css"><style>
|
|||
|
|
.ic{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--fg-2);width:64px}
|
|||
|
|
.ic svg{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
|
|||
|
|
.ic .lbl{font:400 10px var(--font-mono);color:var(--fg-muted)}
|
|||
|
|
</style></head><body>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="t-label">Lucide line icons · 1.5–2px stroke · currentColor</div>
|
|||
|
|
<div class="card-row" style="gap:8px;justify-content:flex-start">
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><div class="lbl">shield</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><div class="lbl">search</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg><div class="lbl">filter</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg><div class="lbl">sync</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><div class="lbl">download</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg><div class="lbl">upload</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg><div class="lbl">eye</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg><div class="lbl">calendar</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg><div class="lbl">file</div></div>
|
|||
|
|
<div class="ic"><svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg><div class="lbl">alert</div></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body></html>
|