O guia prático que ninguém pede
Achei um monte de imagens de coração pequenos na internet e resolvi documentar o processo porque, sinceramente, achei tudo confuso na primeira vez que tentei. Eu precisava de ícones de coração em 16x16 pixels para um projeto de interface interna, e passei duas horas tentando encontrar algo que realmente funcionasse sem parecer borrado ou pixelado demais. O problema principal não é encontrar as imagens — é encontrar as imagens certas no tamanho certo, com transparência, e que não pesem 2MB cada uma.
imagens de coração pequenos: onde baixar e como filtrar
Existem alguns sites que realmente entregam o que prometem. O Freepik tem uma seção enorme, mas a qualidade varia muito. Você precisa filtrar por "vetor" se quiser escalabilidade, ou por "PNG transparente" se for usar direto. O Flaticon é mais específico para ícones e tem milhares de opções de corações em tamanhos variados. Eu salvo sempre no formato SVG quando possível, mesmo que só para redimensionar depois com perda zero de qualidade. Eu pessoalmente uso o IconFinder também, especialmente quando preciso de pacotes completos com variações de um mesmo ícone — corazón cerrado, aberto, com animação, em diferentes cores. A versão gratuita limita downloads diários, mas para uso interno em projetos pequenos não costuma ser problema. Se precisar de volume, o custo da assinatura paga sozinho em produtividade.
Outro site que funciona bem é o SVGRepo. É menos bonito visualmente, mas os arquivos são limpos, bem estruturados e geralmente mais leves. Para ícones de interface, isso faz diferença real no tempo de carregamento. Aqui vai algo que nem todo mundo sabe: muitos desses sites oferecem a imagem em alta resolução e você precisa redimensionar para 16x16 ou 24x24 pixels. O erro comum é fazer isso direto no Photoshop com o interpolação bilinear padrão. O resultado é uma borracha. O que eu faço é ir para o ImageMagick ou usar o TinyPNG combinado com o Sharp do Node.js. Um comando simples como converter heart.svg heart_16.png com a flag de amostragem adequada resolve em segundos e mantém os pixels nítidos.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Um detalhe prático que aprendi na marra: ao baixar SVGs de coração pequeno, verifique se o viewBox está definido corretamente. Encontrei um pacote inteuiro no Freepik com viewBox="0 0 1024 1024" para um ícone que eu precisava em 20px. Quando redimensionei, o coração ficava deslocado porque o centro de origem estava em 512,512 e não em 0,0. A correção foi editar o atributo diretamente no arquivo com um editor de texto, sem abrir Illustrator ou nada assim. Poucos segundos de ajuste. Outro ponto importante que as pessoas ignoram: a densidade de pixels (PPI) não importa para ícones vetoriais, mas importa se você exportar para raster. Se for usar em tela retina, exporte em 2x e deixe o navegador fazer o downscaling. Isso evita aquele aspecto fosco que aparece em displays de alta densidade.
Se o seu projeto exige performance máxima e você vai carregar dezenas de ícones, considere consolidar tudo em um sprite SVG. Reduz o número de requisições HTTP de forma significativa. Eu fiz um teste comparativo: carregar 30 ícones separados levava cerca de 800ms em conexão 3G simulada. Com sprite, caiu para 120ms. O ganho é real, mesmo em redes boas. Uma limitação séria que vale a pena mencionar: muitos desses sites exigem atribuição na versão gratuita. Se você não quer dar crédito no rodapé do site, precisa pagar a licença. Não adianta fingir que não leu os termos — alguns clientes auditam isso.
Para quem não quer depender de sites de terceiros, há a opção de gerar ícones SVG manualmente. Um coração simples pode ser feito com dois arcos de círculo e um triângulo invertido, tudo em menos de 20 linhas de código. O resultado é mais leve, sem dependências externas, e você controla cada curva. Acho que cobre o essencial. Se tiver dúvidas específicas sobre algum formato ou ferramenta, deixa nos comentários que eu respondo.
