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!

In we icons

<svg>
<use xmlns:xlink "http://www.w3.org/1999/xlink" xlink:href "#icon-search"</use>
</svg>

Just one file load. (~30kb)
.svg

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.

SVG sprites Tutorial Part 4
SVG sprites 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..

Example of use: <svg>
<use xlink:href="#icon-search"></use>
</svg>
  • 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?