Como Copiar Símbolos de Localização para Usar em Quaisquer Projetos
Você já tentou pegar aquele ícone de alfinete do Google Maps ou da Apple Maps e colá-lo num design, num site ou até numa planilha? A maioria das pessoas simplesmente clica com o botão direito e escolhe "copiar imagem", mas isso raramente funciona bem. O resultado sai pixelado, fundo branco onde não deveria ter, e dependendo da plataforma, você perde a resolução original em segundos. O problema é que não existe um botão mágico "copiar símbolo" na maioria dos serviços de mapa. Aqui vai o método que eu uso desde 2019, depois de perder horas tentando resolver isso de formas erradas. O segredo não está em copiar a partir da interface visual, mas em extrair o SVG ou PNG diretamente do código-fonte do serviço que você está usando.
símbolo localização para copiar — como fazer de verdade
A primeira coisa que você precisa entender é que o ícone de localização que você vê na tela não é um arquivo separado. Ele é renderizado como parte do CSS ou de um SVG inline dentro do HTML da página. No Chrome, por exemplo, você abre as DevTools (F12), vai na aba Elements e procura por tags como img, svg ou classes que contenham "pin", "marker", "location" ou "map-pin". A classe exata varia entre serviços, mas a lógica é a mesma. Quando encontro o elemento correto, eu o seleciono e copio o nó HTML completo. Isso me dá o SVG cru, que posso abrir num editor vetorial ou salvar como arquivo .svg. O arquivo resultante pesa entre 2 e 8 KB, depende da complexidade do ícone, e escala perfeitamente em qualquer tamanho. Se você precisa de PNG, converte direto no navegador com a extensão "SVG to PNG" ou usa ferramentas como o Inkscape. A conversão leva cerca de 10 segundos e preserva a transparência.
👉 Clique no botão abaixo para saber mais sobre o assunto!
O meu caso mais frustrante aconteceu em março de 2022, quando precisei de um símbolo de localização compatível com todos os navegadores, inclusive IE11, para um sistema legado. Os SVGs modernos do Google usavam filtros de sombra que o IE simplesmente não renderizava. A solução foi usar o ícone original, remover todos os elementos filter e feDropShadow do SVG, efallback para uma versão em
Se você só quer o URL da imagem para colar num projeto que aceite links externos, o Google Materials icones estão hospedados no CDN oficial. O link direto para o ícone location_on em SVG é algo como https://fonts.gstatic.com/s/i/materialicons/location_on/v6/24px.svg. Basta trocar o número final (24px) pelo tamanho desejado. Funciona em qualquer projeto, mas exige conexão com a internet para carregar, o que é uma limitação importante se o sistema for offline. Um aviso que poucas pessoas mencionam: muitos desses ícones possuem restrições de uso dependendo da licença. O ícone padrão do Google Maps, por exemplo, é parte do Material Design e permite uso livre, mas redistribuir o ícone como parte de um produto concorrente de mapas pode violar os termos de serviço. Sempre verifique a licença antes de usar em projetos comerciais. No caso de ícones de bibliotecas open source como Lucide e Heroicons, a licença é geralmente MIT, que é bastante permissiva.
Para quem precisa fazer isso com frequência, eu recomendo criar um pequeno script que extraia automaticamente o SVG do elemento de localização da página. Usei uma extensão do Chrome chamada "SVG Snatcher" por um tempo, mas desisti porque ela às vezes copiava elementos errados quando a página tinha múltiplos marcadores. Hoje em dia faço manualmente: abro DevTools,localizo o elemento, copio o SVG e salvo. O processo inteiro leva cerca de 30 segundos para quem tem prática, e é muito mais confiável do que qualquer ferramenta automatizada que eu já testei. Resumindo de forma direta: pare de tentar copiar a imagem pela interface visual. Vá direto ao código, extraia o SVG, edite se necessário, e converta para PNG só se o seu projeto realmente exigir. Se quiser algo mais rápido e padronizado, use bibliotecas open source com ícones de localização prontos. É simples, mas a maioria das pessoas não sabe que essa opção existe.
