Skip to content

10 icons · MIT licensed

Animated design and layout icons

Grids, columns, layers, crop, pen tool and cursor icons for editors and builders. They fit toolbars where users arrange content, switch between grid and table views, or pick a drawing tool.

Of the 10 icons, 3 replay on every click and 7 play once on hover. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

All design & layout icons

Where to use them

  • Grid, list and table view switchers
  • Layer panels in design and slide tools
  • Crop and cut tools in image editors
  • Page builder and layout pickers
  • Drag-to-move handles

By interaction

  • Click animated icons · 3

    Replays once from the start on every click unless reduced motion is preferred. Crop, Mouse Pointer, Scissors.

  • Hover-to-play animated icons · 7

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Columns, Grid, Layers, Layout, Move, Pen Tool, Table.

Add one to your app

With React, install react-useanimations and import the icon; it plays its hover replay interaction on its own. Every icon in this category works the same way: swap layers for the name on its page.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import layers from 'react-useanimations/lib/layers';

<UseAnimations animation={layers} size={32} />

With shadcn/ui, the CLI adds a ready-made component:

npx shadcn@latest add https://useanimations.com/r/layers.json
import { AnimatedLayers } from '@/components/animations/layers';

<AnimatedLayers size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated design and layout icons are included?

10 icons: Columns, Crop, Grid, Layers, Layout, Mouse Pointer, Move, Pen Tool, Scissors and Table. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated design and layout icons in React?

Install react-useanimations, add import layers from 'react-useanimations/lib/layers' and render <UseAnimations animation={layers} size={32} />. The icon plays its hover replay interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/layers.json instead.

Can I use these animated design and layout icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/layers.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.