Clique, salve edite e estilize seus ícones

com as Coleções do Flaticon

As coleções são úteis para todos que quiserem manter seus ícones organizados, visualizar e manter a consistência em seu projeto. Elas são simples de usar e podem beneficiar tanto iniciantes quanto profissionais.

Ver mais
Organizar

Guarde os ícones que você precisa de diferentes pacotes em um único lugar. Separe suas coleções por projeto e adicione, remova, edite e renomeie ícones.

Salvar

Clique em "backup de ícones" e baixe uma cópia de sua coleção. Compartilhe com seus colegas de equipe ou use mais tarde.

Editar

Para pintar todos os ícones monocromáticos com diferentes cores, use o recurso "Pintar coleção" e escolha sua cor preferida.

Recursos Exclusivos

Além dos formatos PNG, SVG, EPS e PSD , você pode baixar sua coleção como "Fonte de ícones" ou "Sprite SVG" . Esses recursos são usados por web designers e permitem que você baixe um arquivo que contenha todos os ícones em forma de código. É uma maneira simples de trabalhar com design responsivo e fácil de manipular com CSS3.

Fonte de ícones

Ela é suportada por todos os navegadores e fácil de usar — você pode alterar a cor ou adicionar uma sombra à forma da fonte de ícones. Mas esse recurso só funciona com ícones monocromáticos.
Para usar ícones coloridos na sua web, clique em Sprite SVG.

<head>
…
<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css"> 
…
</head>
<i class="flaticon-airplane49"></i>
<span class="flaticon-airplane49"></span>

.flaticon-airplane

SVG Sprite

Very similar to Icon font, SVG Sprite allows you to download font in the form of a code and use it on your web. It is also fully customizable with CSS3, yet unlike “Icon font,” it works with color icons.

<div hidden>
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"> <symbol id="blueberries" viewbox="0 0 53.308 53.308">
<title>
blueberries
</title>
<path d="M39.685,2.953c-7.524,0-13.623,6.099-13.623,13.623c0,2.243, 0.552,4.353,1.512,6.219 c1.496-0.565,3.11-0.888,4.804-0.888c5.281,0,9.851,3.011,12.111,7.404c5.15-1.944,8.819-6.905,8.819-12.735 C53.308,9.052,47.208,2.953,39.685,2.953z" style="fill:#003879;">
</path> 
…
</svg> 
</div>
<svg class="icon">
<use xlink:href="#blueberries"/>
</svg>

#blueberries

Experimente agora

Está a fim de iniciar seu novo projeto e usar coleções imediatamente? Confira nosso guia passo a passo.

Explorar o Flaticon