Loading assets…
Loading assets…
Every icon in the browser, crossed with every motion in the catalog — animated per path, not as a spinning box, and guarded for reduced motion before you paste it.
136 icons × 12 motions.
136 shown · 1,632 pairings across all motions
Each stroke draws itself, in the order the icon is built. The one that reads as craft rather than as decoration, and the reason this set needed the geometry rather than the component.
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" role="img" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="hl-icon-draw">
<title>AlertCircle</title>
<style>
:root { color: #1e1b4b; }
@media (prefers-color-scheme: dark) {
:root { color: #eef2ff; }
}
@keyframes hl-icon-draw {
0% {
stroke-dashoffset: 1;
}
100% {
stroke-dashoffset: 0;
}
}
.hl-icon-draw .hl-shape {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: hl-icon-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) both;
animation-delay: calc(0ms + var(--i, 0) * 120ms);
}
@media (prefers-reduced-motion: reduce) {
.hl-icon-draw .hl-shape {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
stroke-dasharray: none;
stroke-dashoffset: 0;
}
}
</style>
<circle cx="12" cy="12" r="10" class="hl-shape" style="--i:0" pathLength="1" />
<line x1="12" x2="12" y1="8" y2="12" class="hl-shape" style="--i:1" pathLength="1" />
<line x1="12" x2="12.01" y1="16" y2="16" class="hl-shape" style="--i:2" pathLength="1" />
</svg>import type * as React from 'react'
export function AlertCircleDrawIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" className={['hl-icon-draw', props.className].filter(Boolean).join(' ')}>
<circle cx="12" cy="12" r="10" className="hl-shape" style={{ '--i': 0 } as React.CSSProperties} pathLength="1" />
<line x1="12" x2="12" y1="8" y2="12" className="hl-shape" style={{ '--i': 1 } as React.CSSProperties} pathLength="1" />
<line x1="12" x2="12.01" y1="16" y2="16" className="hl-shape" style={{ '--i': 2 } as React.CSSProperties} pathLength="1" />
</svg>
)
}
@keyframes hl-icon-draw {
0% {
stroke-dashoffset: 1;
}
100% {
stroke-dashoffset: 0;
}
}
.hl-icon-draw .hl-shape {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: hl-icon-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) both;
animation-delay: calc(0ms + var(--i, 0) * 120ms);
}
@media (prefers-reduced-motion: reduce) {
.hl-icon-draw .hl-shape {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
stroke-dasharray: none;
stroke-dashoffset: 0;
}
}The markup above carries hl-icon-draw; the rule belongs in your stylesheet once, not once per icon. The downloaded .svg has it inlined so the file animates on its own.
the icon browser × the motion families the catalog’s own effects are built from. Free for anything, including commercial work, with no attribution. Geometry: Lucide icons — ISC. https://lucide.dev/license (v0.525.0).