Click, save, edit and style your icons
with Flaticon collections
Collections are helpful for anyone who wants to keep their icons organized, view them, and maintain consistency in their project. They are simple to use and can be very useful for both beginners and professionals alike.
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 team or save it for your own future use.
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 an icon font or SVG sprite. These formats 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 create a responsive design and they are easy to manipulate with CSS3.
Icon font
These formats are supported by all browsers and are easy to work with. You can change the color or add a shadow to the icon font shapes. 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 the icon font format, SVG sprite allows you to download icons as a font in the form of a code and use it on your web. It is also fully customizable with CSS3, but unlike icon font format, 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