• /
We are sorry you canceled your Premium subscription

You can still enjoy Flaticon Collections with the following limits:

  • 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
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 up to 3 collections to continue:

You have 8 collections but can only unlock 3 of them

    Stay Premium
    Icon editor
    Undo
    Redo
    Grid:
    Select color
      Palette
      History
        Original icon colors
          Move
          Move left
          Move right
          Move up
          Move down
          Rotate/Flip
          Rotate 90º left
          Rotate 90º right
          Flip horizontal
          Flip vertical
          Scale
          Scale down
          Scale up

          SVG Sprites

          SVG sprites let you quickly use vector icons in your website. Check this page to learn more about SVG sprites and how to use them with Flaticon.

          Features

          • 1. High resolution

            SVGs 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

            SVGs are easily customizable with CSS and have specific rules to change their look.

          • 4. Accesible

            Flaticon name SVGs using common terms to help screen readers understand their meaning ;-)

          • 5. Animatable

            CSS transitions and animations are completely compatible with SVG sprites.

          • 6. Tidy

            No more loads of images or cumbersome PNG sprites. Stop wasting your time!

          How to use SVG sprites with flaticon

          SVG sprites Tutorial Part 1
          1. Prepare your collection

          Add icons to the collection for your website

          2. Download the sprite

          Open your collection and press the Download collection button, then select SVG sprite

          SVG sprites Tutorial Part 2
          SVG sprites Tutorial Part 3
          3. Copy in your folder

          Copy the source file to your web folder..

          4. Load the sprite

          Insert the content of your SVG Sprite in your HTML code.

          <link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css">
          SVG sprites Tutorial Part 4
          SVG sprites Tutorial Part 5
          5. Use the IDs

          Use the id of each icon so that they appear on your website. After that, customize them with CSS..

          Use example: <i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
          • Introducing collections

            Collections are the core of our web app. Do you want to know how to use them? Press next to watch the guide.

            1 of 9
          • Collections list

            Collections list

            This is a list of your collections. You can change their names and they are sorted by use. Click on one of them to start using it.

            2 of 9
          • Create a collection

            Create a collection

            Click on this button to create a collection.

            3 of 9
          • Change name

            Change name

            Click here to change the name of the collection

            4 of 9
          • Active collection

            Active collection

            This is your active collection. One collection can have up to 256 icons if you are a registered user or 50 if you are not registered.

            5 of 9
          • Color

            Color

            Add color to all the icons in your collection.

            6 of 9
          • Edit mode

            Edit mode

            Enter the edit mode by clicking the pencil icon to edit the name and color of each icon separately.

            7 of 9
          • Delete

            Delete

            Have you finished with this collection? Delete it and create a new one here.

            8 of 9
          • Enjoy!

            And that is all, if you have any question you can contact our support team here.


            Thank you for using Flaticon, we hope you enjoy our service

            9 of 9
          -
          Do you like our service?