34 ícones · licença MIT

Ícones animados de navegação e setas

Menus hambúrguer que se transformam em botão de fechar, além de setas, chevrons e setas de canto que se deslocam na própria direção no hover. Eles deixam claro para onde um controle leva: abrir a gaveta, voltar, expandir a linha, sair do site.

Dos 34 ícones, 2 ficam em loop contínuo, 4 alternam entre dois estados no clique, 6 tocam de novo a cada clique e 22 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.

Onde usar

Menu hambúrguer que vira botão de fechar no mobile
Botões de anterior e próximo em carrosséis e paginação
Chevrons de accordions e dropdowns
Indicações de voltar ao topo e de rolar para baixo
Links de entrar e sair
Marcadores de link externo e botões de abrir a sidebar

Por interação

Ícones animados em loop · 2
Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. More Horizontal, More Vertical.
Ícones animados que alternam no clique · 4
Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido. Burger Menu, Menu V2, Menu V3, Menu V4.
Ícones animados no clique · 6
Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.
Ícones animados que tocam no hover · 22
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. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

Adicione um ao seu app

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

npm install react-useanimations

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

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

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

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

import { AnimatedMenu } from '@/components/animations/menu';

<AnimatedMenu 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 navegação e setas estão incluídos?

34 ícones: Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down e mais 22. 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 navegação e setas no React?

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

Posso usar estes ícones animados de navegação e setas sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/menu.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.

Todos os ícones de navegação

Onde usar

Por interação

Adicione um ao seu app

Perguntas frequentes