New Health, finance, commerce and maps complete · hover-and-hold →

Every icon,
animated.

26,278 free, open-source icons that move the way real things move. One tiny element for React, Angular, Vue and plain HTML.

Browse 26,278 icons

Works withReactAngularVueSvelteHTMLNext.js

26,278: icons
35: categories
100: animations
0: dependencies

Realistic motion

Motion that makes sense

Not one generic bounce for everything. Each icon tells its own small story, and every motion ends exactly at rest.

Clock hands turn

Hands are found and split at the face centre. The minute hand sweeps, the hour hand advances and keeps its place.

Gears spin on the axle

The engine finds the axle circle and spins the gear around its real centre.

Bells swing from the top

The body swings on its hanger, the clapper follows a beat later.

Lids lift, bins shake

The lid rises while the bin gives a little shake.

Rain falls

The cloud floats while the drops fall one by one.

Locks open on the hinge

The shackle tilts around the end that stays in the body.

100% animated

All 26,278 icons move: 20,097 hand-made choreographies plus an engine that reads each icon's geometry.

26,278 icons

One consistent style in 35 categories: 24×24 grid, 2px stroke, round caps, currentColor.

Tiny and lazy

One custom element. Icons load per category, so 10 icons never download all 26,278.

Polite motion

Plays once, always finishes, never lights up a whole card, respects reduced motion.

Hover and hold

trigger="hold": the icon animates to its peak on hover and stays there (the lid stays up), then returns when the mouse leaves.

Static when you need it

animated="false" on one icon, or config.animated = false for the whole page. Animated stays the default.

100 animations

From draw, pop and swing to beat, sway, flutter, drive, wave, pendulum and drip: each picked for what the icon is.

Deep professional fields

Legal, health, finance, commerce and maps each have 1,000+ icons, drawn for real products in those fields.

Works offline

A single classic script with every icon inside. No network, no build step.

MIT licensed

Free for personal and commercial use. Built on Lucide (ISC) and Tabler (MIT).

One element

Drop it into any framework

<tlp-icon> is a standard web component. Import it once and use it in templates, JSX or plain HTML. The hover rule decides which icon plays, so a busy card never lights up all at once.

Read the docs Framework guides

import 'tlp-icons/element';

export function Toolbar() {
  return (
    <nav>
      <button><tlp-icon name="bell" /> Alerts</button>
      <button><tlp-icon name="settings" /> Settings</button>
      <tlp-icon name="loader-circle" trigger="loop" />
    </nav>
  );
}