Click here to Skip to main content
15,606,568 members
Articles / Programming Languages / C++
Posted 3 Feb 2019

Tagged as


4 bookmarked

Desktop App to Automate SVG Sprites Generation

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
3 Feb 2019CPOL2 min read
The definite solution to create SVG sprites for quick usage in your HTML development workflow


For showing icons in my HTML, I am a big fan of using SVG icons sprites (instead of resorting to icon-fonts and its many drawbacks).

The problem is that you normally have to download each SVG icon manually to write down your SVG sprite. Or use some third party tool to automate this process, like Iconmoon.

What if you could easily pick icons from famous packs like FontAwesome, Material Design, and be able to easily use them through an automatically generated SVG sprite file?

IconDrop is an open-source desktop app that automates the whole process with a very intuitive interface:

Image 1

Side note: IconDrop is also a handy tool for designers because it allows you to drag-n-drop SVG icons to your favorite design tool like Photoshop, Illustrator, Adobe XD or Sketch. That's why the name: IconDrop.

It works for Windows and OSX.

The HTML + SVG Sprite Approach Process Explained

Essentially you have a big .svg file with all your icons, each with an unique ID: (this is the SVG sprite code)

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" 
 xmlns="" xmlns:xlink="">
        <symbol id="account-alert" viewBox="2 4 20 16">
            <path d="M 10,4C 12.2091,4 14,5.79086 14,8C 14,10.2091 12.2091,12 10,
             12C 7.79086,12 6,10.2091 6,8C 6,5.79086 7.79086,4 10,4 Z M 10,14C 14.4183,
             14 18,15.7909 18,18L 18,20L 2,20L 2,18C 2,15.7909 5.58172,14 10,14 Z M 20,
             12L 20,7L 22,7L 22,12L 20,12 Z M 20,16L 20,14L 22,14L 22,16L 20,16 Z "></path>

        <symbol id="account-alert" viewBox="2 4 20 16">
            <path ... ></path>

Then, somehow you print this SVG just after your <body> tag. For example, in PHP:

<!DOCTYPE html>
<html lang="en">
        svg { width: 100px; height: 100px; }

    <?php echo file_get_contents('icon-sprites.json'); ?>

Then, when you want to show the icon in the page, you write down a <use> tag referencing an icon from the sprite by its ID:

    <!-- Show the SVG icon -->
    <svg class="icon icon-account-alert"><use xlink:href="#account-alert"></use></svg>

See Codepen result.

The whole point of IconDrop is how it can help you automate this process. Let's see how.

1. Create Your SVG Sprite Project and Activate It

In IconDrop, for each website you are creating, you create a separate sprite project, where you should specify where the generated .svg file will be saved.

In the Home screen, click 'Add new', and you will be asked the project name and directory where the auto-generated icon-sprites.svg file will be saved:

Image 2

Then you need to activate the project for adding icons to it:

Image 3

2. Searching and Adding Icons

IconDrop comes bundled with a HUGE catalog of icons. Each icon has many associated tags for a good search result:

Image 4

To add the icon to the active project, just click the ⊕ button.

3. <use> the Icon in Your HTML

Select the icon you want to show in your HTML and click Copy SVG <use> code button:

Image 5

And then paste this HTML where you want this icon to appear.

<svg class="icon icon-cart"><use xlink:href="#cart"></use></svg>


To picture the workflow of IconDrop usage, an image is worth a thousand words:

Image 6

Download / Source-Code

So, here, I showed you how to use IconDrop as Frontend developer perspective.

IconDrop is also a tool aimed for designers. If you play both roles, IconDrop comes in very handy.

For downloading IconDrop and seeing some explanatory videos:

Source-code is available at


  • 03/02/2019 - Article submission


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
MI Software
Brazil Brazil
Ramon has a bachelor in Information Systems at University of Caxias do Sul. He started his career in the creative area, working with web design, and then evolved to work with a more hardcore area of control systems engineering while making C#/.NET systems to automate every kind of process. This was when he discovered his passion for the low-level world, working with C, C++ and D development.
Check my things at

Comments and Discussions

-- There are no messages in this forum --