22 ícones · licença MIT

Ícones animados de arquivos, pastas e usuários

Arquivos, pastas, livros, e-mail, anexos e pessoas. Eles identificam aquilo com que o usuário trabalha, e as variantes de adicionar, remover e confirmar fazem o gerenciamento de listas e equipes parecer mais responsivo.

Dos 22 ícones, 5 tocam de novo a cada clique, 7 tocam no hover e voltam ao contrário quando o mouse sai e 10 tocam uma vez no hover. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de conteúdo

Onde usar

Gerenciadores de arquivos e listas de documentos
Botões de anexar e de copiar para a área de transferência
Caixa de entrada e arquivo em clientes de e-mail
Listas de membros da equipe com ações de adicionar e remover usuários
Menus de compartilhamento de documentos e links

Por interação

Ícones animados no clique · 5
Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. File Minus, File Plus, Folder Minus, Folder Plus, User Check.
Ícones animados no hover · 7
Toca para a frente no mouseenter e ao contrário no mouseleave. Archive, Copy, Mail, Share, User minus, User plus, User X.
Ícones animados que tocam no hover · 10
Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Hover” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque copy pelo nome que aparece na página do ícone.

npm install react-useanimations

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

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

Com o shadcn/ui, a CLI adiciona um componente pronto:

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

import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de arquivos, pastas e usuários estão incluídos?

22 ícones: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image e mais 10. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de arquivos, pastas e usuários no React?

Instale o react-useanimations, adicione import copy from 'react-useanimations/lib/copy' e renderize <UseAnimations animation={copy} size={32} />. O ícone executa a interação “Hover” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/copy.json.

Posso usar estes ícones animados de arquivos, pastas e usuários sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/copy.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.