Are you sure you want to delete this collection?
- /
The advantages of your collections changed
- You can choose only 3 collections to keep
- You can only add up to 100 icons per collection
- You cannot add Premium icons to your collection
Keep making the most of your icons and collections
Get 20% OFF our
Annual Premium Plan
- /
Select 3 collections to continue:
You have 8 collections but can only unlock 3 of them
Report download
Base 64 encoded image
Copy the base64 encoded data and insert it in you document HTML or CSS.
Need help? Maybe this link can help you
HTML image
CSS background
Using it for web? Copy this link in your website:
Icon fonts
Icon fonts let you to quickly convert vector icons into webfonts. This means you can display vector icons in your website and control them with CSS. Check this page to learn more about icon fonts and how to use them with Flaticon.
Features
-
1. High resolution
Icons are scalable and retina-ready. Perfect for a responsive design. They look nice on screens of any resolution.
-
2. Quick and easy
Building iconfonts with Flaticon is easier than ever. Add icons to your collections and download them in seconds.
-
3. Total control CSS
Iconfonts are basically text, so you can change their aspect easily with CSS.
-
4. Accessible
Flaticon name symbols with common terms to help screen readers understand their meaning ;-).
-
5. Animatable
CSS transitions and animations are completely compatible with iconfonts.
-
6. Tidy
No more loads of images or cumbersome sprites. Stop wasting your time!
How to use icon font with flaticon
1. Prepare your collection
Add monocolor icons to the collection for your website
2. Download iconfont
Open your collection and press the Download collection button, then select Iconfont
3. Copy in your folder
Copy the source files and CSS to your web folder.
4. Load the stylesheet
Request the CSS stylesheet from the head of your web.
<link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css">
5. Use the classes
Use the classes of each icon and they will appear on your website. After, manipulate them with CSS.
Use example: <i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
Copy to clipboard. Copying this asset count as a download
Copy to clipboard
Download
Download asset
What is this?
You have reached the limit of icons in your collection
Register now and step up your collection's game
Register for freeCreate up to 3 collections
Add 256 icons per collection
Save and customize your icons
{{#if status}}
Edit mode
Sort mode (Drag&Drop)
{{/if}}
{{#if status}}
{{/if}}
Drop to upload
You have reached the limit of edited icons
You can only upload 3 icons as a free user. Go premium and upload icons unlimited
Go PremiumAdd unlimited collections
Add 256 icons per collection
Save unlimited custom icons
-
Upload your svg icons
Create custom collections
Do you want to make a personalized icon pack?
Just add the icons you want to the collection and download them in the format you need. More info
Register for freeCreate up to 3 collections
Add 256 icons per collection
Save and customize your icons
Get a backup of the icons in this collection and restore them anytime
Download backup
This collection is empty.
Add some icons to download a backup.
Restore the icons in your backup to this collection
Download:
Choose a format
-
Download in PNG and use the icons in websites, Powerpoint, Word, Keynote and all common apps
-
Select a size (in pixels).
-
Download in SVG and use the icons in websites, Adobe Illustrator, Sketch, CorelDraw and all vector design apps
-
Download in EPS and use the icons in websites, Adobe Illustrator, Sketch, CorelDraw and all vector design apps
-
Download in PSD and use the icons with Adobe Photoshop