Click, save, edit and style your icons
with Flaticon Collections
Collections are helpful for anyone who wants to keep their icons in order, visualize, and maintain consistency in their project. They are simple to use and can benefit both beginners and professionals.
View more
Organize
Store the icons you need from different packs in one place. Separate your collections by projects, add, remove, edit, and rename icons.
Save
Click on “icons backup” and download a copy of your collection. Share it with your teammates or use it later yourself.
Edit
To paint all monochrome icons in different colors, use the “Paint collection” feature and choose the tone that works best.
Exclusive Features
Apart from PNG, SVG, EPS, and PSD formats , you can download your collection as “Icon font” or “SVG Sprite” . These features are used by web designers and allow you to download a file that contains all icons in the form of a code. It is a simple way to work for responsive design and easy to manipulate with CSS3.
Icon font
It is supported by all browsers and easy to work with: you can change the color or add a shadow to an icon font shape. However, this feature works with monochrome icons only.
To use color icons on your web, click on SVG Sprite.
<head>
…
<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css">
…
</head>
.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
Try it now
Feeling like starting your new project and using collections right away? Check our step-by-step guide.
Explore Flaticon