Pular para o conteúdo
PT

9 ícones · licença MIT

Ícones animados de mapa e localização

Pins de mapa, setas de navegação, globos, alvos e âncoras. Um pin que cai no hover destaca um localizador de lojas ou um endereço de entrega, e o globo funciona como seletor de idioma ou região.

Dos 9 ícones, 8 tocam uma vez no hover e 1 fica em loop durante o 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 mapas e localização

Onde usar

  • Localizadores de lojas e campos de endereço
  • Botões de localização atual e de rotas
  • Seletores de idioma e região
  • Entrega e rastreamento de pedidos
  • Apps de viagem e reservas

Por interação

  • Ícones animados que tocam no hover · 8

    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. Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target.

  • Ícones animados em loop no hover · 1

    Fica em loop durante o hover, termina o ciclo atual depois do mouseleave e fica estático quando o usuário prefere movimento reduzido. Globe.

Adicione um ao seu app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/map-pin.json
import { AnimatedMapPin } from '@/components/animations/map-pin';

<AnimatedMapPin 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 mapa e localização estão incluídos?

9 ícones: Anchor, Crosshair, Globe, Life Buoy, Map, Map Pin, Navigation, Navigation 2 e Target. 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 mapa e localização no React?

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

Posso usar estes ícones animados de mapa e localização sem React?

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