Downloader IconScout: guia de ícones, 3D e arquivos Lottie
Guia do downloader IconScout: baixe ícones, ilustrações 3D e animações Lottie, entenda os formatos SVG, PNG e JSON e use tudo com limpeza nos seus designs.
O downloader do IconScout entrega ícones, ilustrações 3D e animações Lottie quando você cola o link de um conteúdo, para que você monte uma interface ou apresentação bem acabada sem comprar um plano completo por causa de alguns arquivos. Este guia explica cada tipo de arquivo, qual formato escolher para cada trabalho e como manter um projeto inteiro visualmente consistente.
O que você pode obter no IconScout?
O IconScout é um marketplace e biblioteca de recursos de design. As três categorias que mais interessam à maioria das pessoas são:
- Ícones: ícones avulsos e conjuntos de ícones em vários estilos, como linha, preenchido, duotone e cor chapada.
- Ilustrações 3D: objetos e cenas renderizados que dão profundidade a landing pages e apresentações.
- Animações Lottie: pequenos arquivos animados usados em apps, sites e apresentações para loaders, onboarding, estados vazios e microinterações.
Há também ilustrações, stickers e outros recursos, mas ícones, 3D e Lottie são o centro da maioria dos pedidos.
Qual formato de arquivo você deve usar?
Os formatos são onde a maioria dos iniciantes perde tempo. Aqui vai a versão resumida.
SVG para ícones e ilustrações chapadas
SVG é um formato vetorial. Ele escala para qualquer tamanho sem desfocar, tem um arquivo minúsculo e permite mudar as cores no código ou em uma ferramenta de design. Use SVG para ícones de sites, interfaces de apps, logotipos em mockups e preparação para impressão.
PNG para aplicação rápida
PNG é uma imagem raster com transparência. É bom para slides, posts de redes sociais e e-mail, onde você não precisa editar a forma. Exporte em um tamanho de pelo menos o dobro do tamanho de exibição para que continue nítido em telas de alta densidade.
JSON para animações Lottie
Uma animação Lottie é um arquivo JSON que descreve o movimento. Uma página web ou um app o reproduz com uma pequena biblioteca de player. É muito mais leve do que um GIF e continua nítida em qualquer tamanho. Algumas bibliotecas também oferecem uma versão dotLottie, que é um pacote compactado.
Como escolher para 3D
As ilustrações 3D normalmente são entregues em PNG com fundo transparente, às vezes com ângulos extras ou variações de cor. Elas são mais pesadas do que ícones, então comprima-as antes de usar em uma página web.
Como usar o downloader do IconScout
- Pesquise no IconScout. Use primeiro o filtro de tipo: ícones, 3D, Lottie ou ilustrações. Depois acrescente uma palavra-chave como payment, shopping cart ou success.
- Abra a página do conteúdo e confira o estilo, o nome do pacote e os formatos disponíveis.
- Copie o link da barra de endereços.
- Abra o downloader do IconScout, cole o link e envie.
- Baixe o arquivo e descompacte-o se chegar como um pacote.
- Teste no seu design antes de baixar mais. Um ícone no estilo certo vale mais do que vinte que não combinam.
Se preferir explorar a biblioteca inteira livremente, há também o acesso ao IconScout pela conta, aberto com a extensão, o navegador seguro ou a versão na nuvem.
Como manter um conjunto de ícones consistente
O erro que faz as interfaces parecerem amadoras é misturar estilos. Siga estas regras.
- Uma família por projeto. Escolha um pacote e baixe dele. Se precisar de um ícone que o pacote não tem, busque pela mesma tag de estilo, e não só pelo mesmo assunto.
- Mesma espessura de traço. Compare ícones de linha de 2 px com ícones de linha de 2 px. Não misture linhas finas e grossas.
- Mesmo estilo de cantos. Cantos arredondados com arredondados, pontiagudos com pontiagudos.
- Mesmo tamanho de grade. Coloque todos os ícones em uma grade de 24 px ou 32 px para facilitar o alinhamento.
- Uma lógica de cor. Use uma única cor ou uma paleta definida de duas cores ligada à sua marca.
Como usar bem as animações Lottie
É fácil exagerar no Lottie. Algumas animações pequenas dão vida a uma interface; dez ao mesmo tempo dão a sensação de ruído.
- Use a animação para explicar: um sinal de confirmação após o pagamento, um loader enquanto os dados chegam, um movimento suave em um estado vazio.
- Mantenha os loops curtos e calmos. Busque um movimento que apoie o conteúdo, e não compita com ele.
- Respeite os usuários que preferem movimento reduzido. Ofereça uma versão estática ou pause a animação para eles.
- Teste o tamanho do arquivo. Um arquivo Lottie simples tem alguns kilobytes; um complexo, com muitas camadas, pode ser bem maior.
- Ajuste as cores da animação à sua marca antes de publicar.
Se você trabalha com motion para vídeo, nosso guia sobre templates do Motion Array apresenta outra abordagem para recursos de movimento.
Como usar ilustrações 3D em layouts reais
A arte 3D chama a atenção, mas pode parecer genérica se usada só como decoração. Use-a onde ajude uma mensagem: uma seção hero com um único objeto forte, um card de recurso com um conceito reconhecível ou o slide de título de uma apresentação.
Mantenha uma sombra suave, uma direção de luz consistente e uma paleta de cores limitada. Quando a sua página já tem fotos, não coloque 3D por cima delas. Escolha uma linguagem visual por página.
Licença e atribuição
Cada conteúdo do IconScout tem termos de licença que dependem do tipo de licença e, às vezes, do criador. Alguns conteúdos exigem atribuição, e alguns usos, como vender o próprio conteúdo ou montar uma biblioteca concorrente, não são permitidos.
Confira a licença na página do conteúdo antes de publicar e guarde o nome do conteúdo ou do pacote junto com os arquivos do projeto. Não redistribua os arquivos baixados como se fossem o seu próprio pacote de ícones.
Você pode ler mais sobre os termos comuns em conteúdo stock e licenças explicados.
Exemplos práticos
Uma página de preços: use um conjunto de ícones de linha para os marcadores de recursos, uma ilustração 3D para o hero e um pequeno sinal de confirmação em Lottie para o estado de confirmação.
Um pitch deck: use ícones PNG de um único pacote em todos os slides e um objeto 3D na capa. Não precisa de animações, então dispense o Lottie.
O onboarding de um app móvel: três arquivos Lottie, um por tela, com a mesma paleta e a mesma velocidade de movimento.
Como o ZTOOLZ se encaixa: o ZTOOLZ oferece acesso compartilhado ao IconScout por meio de contas pertencentes à plataforma, como uma página de downloader onde você cola um link ou como acesso à conta aberto com a extensão, o navegador seguro ou a versão na nuvem. Não é uma assinatura pessoal, e você deve conferir a licença de cada conteúdo para o seu projeto. Abra o downloader do IconScout para ver o preço atual, ou adicione-o a um plano personalizado com o botão + na loja.
Perguntas frequentes
Posso baixar animações Lottie como arquivos JSON?
Sim, os conteúdos Lottie são fornecidos em JSON e, às vezes, também em um formato dotLottie compactado. Você os reproduz com uma biblioteca de player Lottie em uma página web ou app.
Devo usar SVG ou PNG para ícones?
Use SVG quando o ícone for redimensionado ou recolorido, como em sites e apps. Use PNG para aplicação rápida em slides, documentos e posts em que você só precisa de uma imagem.
Posso mudar as cores de um ícone baixado?
Com SVG, sim, em qualquer editor vetorial ou no código. Com PNG, as mudanças de cor são limitadas. As cores do Lottie podem ser alteradas em ferramentas de edição de Lottie.
Preciso dar atribuição?
Depende da licença do conteúdo. Confira na página do conteúdo se há exigência de atribuição e guarde o nome do pacote para poder dar o crédito, se necessário.
As ilustrações 3D servem para impressão?
Podem servir, se você baixar uma versão de alta resolução. Compare as dimensões em pixels com o tamanho da impressão e veja nosso guia sobre arquivos para impressão vs web antes de enviar a uma gráfica.
