Aller au contenu
FR

10 icônes · licence MIT

Icônes animées de design et de mise en page

Grilles, colonnes, calques, recadrage, outil plume et curseurs pour les éditeurs et les builders. Elles trouvent leur place dans les barres d’outils où l’on organise du contenu, où l’on passe d’une vue grille à une vue tableau ou où l’on choisit un outil de dessin.

Sur les 10 icônes, 3 se rejouent à chaque clic et 7 se jouent une fois au survol. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, ainsi qu’en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes de design et de mise en page

Où les utiliser

  • Sélecteurs d’affichage grille, liste et tableau
  • Panneaux de calques des outils de design et de présentation
  • Outils de recadrage et de découpe des éditeurs d’images
  • Page builders et sélecteurs de mise en page
  • Poignées de glisser-déposer

Par interaction

  • Icônes animées au clic · 3

    Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. Crop, Mouse Pointer, Scissors.

  • Icônes animées à lecture au survol · 7

    Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas. Columns, Grid, Layers, Layout, Move, Pen Tool, Table.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « lecture au survol ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez layers par le nom indiqué sur leur page.

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

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

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

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

<AnimatedLayers size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes animées de design et de mise en page sont incluses ?

10 icônes : Columns, Crop, Grid, Layers, Layout, Mouse Pointer, Move, Pen Tool, Scissors et Table. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de design et de mise en page dans React ?

Installez react-useanimations, ajoutez import layers from 'react-useanimations/lib/layers' et affichez <UseAnimations animation={layers} size={32} />. L’icône joue son interaction « lecture au survol » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/layers.json.

Puis-je utiliser ces icônes animées de design et de mise en page sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/layers.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Aucune n’utilise d’expressions : la version light de lottie-web suffit.