Line Icons 48
Icons · 48 files · CC0-1.0
A small, consistent icon set for library UIs and motion demos. Every glyph is drawn on a 24 × 24 grid with an 18 px live area, a single 1.5 px stroke, round caps and joins, and stroke="currentColor" — so one CSS color rule themes the whole set, and the stroke scales cleanly from 16 px to 48 px.
What’s inside
- Arrows ×4 and chevrons ×4 (up / down / left / right)
- Playback: play, pause, replay, fullscreen
- UI chrome: search, menu, close, plus, minus, check, copy, download, link, external, filter, grid, list, settings, info, warning
- Collect & share: heart, star, bookmark, share
- Motion-library glyphs: layers, cursor, scroll, keyboard, code, sparkle, zap, timer, image, video, cube, globe, sun, moon, eye, eye-off
Usage
Inline any svg/<name>.svg and set color, or include sprite.svg once and reference symbols:
<svg width="24" height="24"><use href="#icon-arrow-right"/></svg>Each icon is a single <path>, so stroke-dash draw-on animations (stroke-dasharray / stroke-dashoffset, or GSAP DrawSVG-style tweens) work without any preparation. Regenerate the pack with node src/content/assets/line-icons-48/make.mjs.
Download
License: CC0-1.0 — Original work by MOTION/LAB, drawn programmatically and released under CC0 1.0 — use anywhere, no attribution required.
- icons
- svg
- line
- ui
- sprite
- currentColor
- 24px
Used in these effects
light Toast Notification Micro-interaction
Four triggers spawn stacked toasts bottom-right: each slides in from x 40 with a back.out overshoot while earlier toasts shift up via Flip, an icon draws itself with DrawSVG, a hairline counts down 4s (pausing on hover) and dismissal re-flows the stack.
- gsap
- flip
- svg
Featured light Fullscreen Menu with Staggered Links
A burger morphs into a cross while a full-screen curtain drops via clip-path; five giant serif links rise from masks with a stagger, a contact column fades in and a background index number follows the hovered link. Close simply reverses the timeline.
- gsap
light Hide / Show Header on Scroll
A fixed header slides out of view when you scroll down faster than a velocity threshold and slides back the moment you scroll up; past a set offset it shrinks into a compact strip with a frosted backdrop.
- gsap
- scrolltrigger
light Magnetic Button
Three pill buttons attract toward the pointer inside an invisible radius, their labels leading slightly for parallax, flood with colour from the entry point, and spring back with an elastic snap on leave.
- gsap