10 icônes · licence MIT

Icônes animées d’édition de texte

Gras, italique, souligné, alignement et listes pour les barres d’outils de texte enrichi. Une courte animation au clic confirme que la mise en forme a été appliquée, ce qui aide dans les éditeurs où le changement sur le texte lui-même est discret.

Sur les 10 icônes, 8 se rejouent à chaque clic et 2 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 d’édition de texte

Où les utiliser

Barres d’outils d’éditeur de texte enrichi
Zones de saisie de commentaires et de messages
Éditeurs d’articles de CMS et de blog
Apps Markdown et de prise de notes
Contrôles d’alignement du texte dans les outils de design

Par interaction

Icônes animées au clic · 8
Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. Align Center, Align Justify, Align Left, Align Right, Bold, Italic, Type, Underline.
Icônes animées à lecture au survol · 2
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. Hash, List.

En ajouter une à votre app

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import bold from 'react-useanimations/lib/bold';

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

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

npx shadcn@latest add https://useanimations.com/r/bold.json

import { AnimatedBold } from '@/components/animations/bold';

<AnimatedBold 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 d’édition de texte sont incluses ?

10 icônes : Align Center, Align Justify, Align Left, Align Right, Bold, Hash, Italic, List, Type et Underline. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées d’édition de texte dans React ?

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

Puis-je utiliser ces icônes animées d’édition de texte 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/bold.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.