Optimising SVG icons for your web apps and websites

What is this article about

Article will explain how you can optimise your SVG icons in a way that it will make it easier for you to use them and to be sure that they are not bigger (in size) than they should be.

I use the tools I will show you later in every project I am working on since I got to use inline SVG icons.

Optimisation technique described here is valid for any use of SVG and it doesn't matter if you use SVG's as files, inline or as a component in your library/framework.

Approach and its limitations

I feel like I need to explain here what we will do with SVG's and then you can decide if this approach is valid for your use case or maybe there is an alternative solution that suits your use case better.

I am aware that silver bullet solution doesn't exist but this works well for so many projects I worked on that I decided to share it in case other developers can benefit somehow.

The Approach

In order to successfully optimise the SVG, we need to meet several conditions:

• make it lighter (in kb)
• make it flatter (convert other elements like rect and circle to paths and decrease number of paths in the SVG, ideally to just one)
• strip all unnecessary attributes
• strip it of all unneeded nodes by recalculating
• maintain vector quality
• optional but recommended - resizing all your icons to have the same viewBox value for easier size manipulation and icon set consistency.

Sounds like a complicated job but all those tools are helping us achieve it with minimum effort on our side.

Possible limitations

Goal of this approach is to make the SVG smaller. Additional optimisation step that I prefer to take is to put the whole vector on single path.

Additional benefit of having lean SVG icon comes with the price of having icon in just one color with option to put the second color as the background-color.

That doesn't mean that you can't have different color on :focus or :hover, it just means that fill color is going to be used for your whole icon.

I use that extra optimisation in all react-based projects with the creation of reusable <Icon /> component.

For multicolored icon needs all of this gets easier if you use inline SVG icons with multiple paths. Every path can have its own color (via CSS class or inline fill), so no limitations for that use case.

Introducing tools

SVG images are basically code that represents vector images, their nodes, curvatures and other attributes that are necessary to display the vector image. Vector image is calculated and that's why it is so smooth no matter the zoom level.

For success we will need some tools that can deal with the SVGs.

1. Text editor - the one you're most comfortable with

I will use VS code with the SVG plugin as this is what I usually use, but feel free to use any text editor that you are used to. We will use text editor as a medium to save the SVG output and to make some manual changes to the output if needed.

2. SVGOMG - SVG Optimiser Missing GUI

Thanks to Jake Archibald, we have this nifty tool that allows us to optimise SVG's in real time inside the browser and to copy/paste the optimised result.

If I have to single out one SVG tool that I find the most valuable it would be SVGOMG.

It also takes care of rect and polygons and some other elements except circle and converts them into the path. Because circle elements still remains <circle /> elements, we have another tool for this and it is...

3. Circle/Ellipse to Path Converter

I like the simplicity of this converter tool, it is very handy if we have circles or ellipses instead of paths in our SVG.

Thanks to Dan Hansen aka ComplexDan circle to path conversion is just few clicks away.

Actual process of optimising the SVG

The usual case - Youtube Icon

Let's start with easy one - Youtube icon.

<svg 
  width="24" 
  height="24" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <defs>
    <path 
      d="M12 0c6.64 0 12 5.36 12 12s-5.36 12-12 
      12S0 18.64 0 12 5.36 0 12 0zm0 23c6.075 0
      11-4.925 11-11S18.075 1 12 1 1 5.925 1
      12s4.925 11 11 11zM8 7h8a3 3 0 0 1 3 
      3v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4a3 
      3 0 0 1 3-3zm2.6 2.848v4l4-2-4-2z" 
      id="a"
    />
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path d="M0 0h24v24H0z"/>
    <use fill="currentColor" xlink:href="#a"/> 
  </g>
</svg>

At first glance you can see that we have <defs></defs> which are used to define path that you can reuse wherever you need it by using <use xlink:href="#pathId"> numerous times. This is useful if you have complex illustration with repeating items/patterns.

Icons are usually simple vectors and this one in particular doesn't have any paths that are repeating so we will remove <defs /> and its counterpart <use />. We will cut and paste <path /> in the place where <use /> used to be (pun intended) and we will also remove id="a" as this is not longer needed.

Now we don't see anything anymore. Since <g> </g> is used to group different elements it wraps our paths and fills them with none which is same as being transparent. What we will do right now is deleting the group wrapper and just leaving two paths one under the other.

Just like this:

<svg 
  width="24" 
  height="24" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <path d="M0 0h24v24H0z" />
  <path
    d="M12 0c6.64 0 12 5.36 12 12s-5.36 12-12 
    12S0 18.64 0 12 5.36 0 12 0zm0 23c6.075 0
    11-4.925 11-11S18.075 1 12 1 1 5.925 1
    12s4.925 11 11 11zM8 7h8a3 3 0 0 1 3 
    3v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4a3 
    3 0 0 1 3-3zm2.6 2.848v4l4-2-4-2z"
  /> 
</svg>

Ok, now we got completely black rectangle, where is the icon we saw in the beginning? It is there but it seems that one of the paths is acting as a background. Let's check that by adding fill attribute to each path to see what those paths look like. Update the code to this:

<svg 
  width="24" 
  height="24" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <path d="M0 0h24v24H0z" fill="blue" />
  <path
    fill="yellow"
    d="M12 0c6.64 0 12 5.36 12 12s-5.36 12-12 
    12S0 18.64 0 12 5.36 0 12 0zm0 23c6.075 0
    11-4.925 11-11S18.075 1 12 1 1 5.925 1
    12s4.925 11 11 11zM8 7h8a3 3 0 0 1 3 
    3v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4a3 
    3 0 0 1 3-3zm2.6 2.848v4l4-2-4-2z"
  /> 
</svg>

Oh ok, so the blue path is acting as a background, we can delete that <path/> completely and also we can remove fill from the other path as it was used just for 'debugging' purposes:

<svg 
  width="24" 
  height="24" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <path
    d="M12 0c6.64 0 12 5.36 12 12s-5.36 12-12 
    12S0 18.64 0 12 5.36 0 12 0zm0 23c6.075 0
    11-4.925 11-11S18.075 1 12 1 1 5.925 1
    12s4.925 11 11 11zM8 7h8a3 3 0 0 1 3 
    3v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4a3 
    3 0 0 1 3-3zm2.6 2.848v4l4-2-4-2z"
  /> 
</svg>

Now it starts to look more like it. Now copy the code and paste it in SVGOMG tool.

Once you paste the SVG code from your text editor SVGOMG will load your vector and you can see it as an image but also as code, you can toggle that on top bar.

There are bunch of global settings and features on the right side of the SVGOMG. From my experimenting with the tool I concluded that I got best output when I turned all the features on except:

• Remove xmlns - turning on will render your SVG invisible, but in some cases xmlns attribute is not needed
• Sort children of <defs> - this is making <defs>, since we are optimising icons we don't need them

Just leave those two features off and you're good to go.

Global settings have interesting options. Toggling 'Show original' toggles between current SVG and the original one you pasted in the beginning.

Compare gzipped is just comparison tool that tells you difference between original and current SVG, ie. 77% means it is just 77% of the size of original file. This is good to turn on as you can see the difference being calculated in the real time.

Prettify markup is also great option to turn on as the MARKUP/CODE view of your SVG will look prettier and will not be squeezed in one line.

Multipass is one that you should turn on as it remove duplicated attributes if you have any and sorts them in the same order for every path.

Precision slider is recalculating nodes and less the number, less the precise the vector is but also has less SVG nodes (which is good thing). Good way of balancing things out is to lower the precision to the point where it is visually identical to the original.

You can check that by lowering precision to 1 and then toggle on and toggle off the 'Show original' constantly, you will see that current icon is a bit off (in this case play triangle in the middle is shifted to the top for a bit), increase number by 1 and toggle again. Rinse and repeat until you have completely visually identical vector to the original one.

Sometimes there are minor visual differences in precision being higher/lower by 1 point, like the line is off by 0.5 pixel and if you can live with that quality - just use it as it is, copy the code from markup tab and paste it in your text editor. Save the SVG file - I know its obvious one, but hey!

It should look something like this:

<svg 
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
>
  <path 
    d="M12 0c6.64 0 12 5.36 12 12s-5.36 12-12 
    12S0 18.64 0 12 5.36 0 12 0zm0 23a11 11 0
    1 0 0-22 11 11 0 0 0 0 22zM8 7h8a3 3 0 0 1 3 
    3v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4a3 
    3 0 0 1 3-3zm2.6 2.85v4l4-2-4-2z"
  />
</svg>

So the icon got viewBox instead of height and width, which is, in my opinion, better. You can still use width and height for this icon.

If you need your icon to be 64px by 64px, just put width to 64 and height to auto, it will scale properly.

Above is the minimum code for youtube icon that looks exactly same as original one, but it has flat structure (easy selector for CSS) and it is lighter (original was 331b and optimised one is 195b). You can save even more bytes/kilobytes on more complex icons.

Let's take a look at another, more complicated example.

The unusual case - Petri Dish Icon

This one is a bit more complex as it has multiple paths and a lot of different attributes. I had SVG icon this complicated like 3 times in last 5 years. Complicated in a sense on what you have to do to achieve putting it on a single path.

<svg 
  enable-background="new 0 0 170 170" 
  viewBox="0 0 170 170" 
  xmlns="http://www.w3.org/2000/svg"
>
  <g fill="currentColor">
    <circle cx="109.7" cy="80.7" r="3.7"/>
    <path 
      d="m71.7 54.8c-5.1 0-9.2 4.1-9.2 9.2s4.1 9.2 9.2 
      9.2 9.2-4.1 9.2-9.2-4.1-9.2-9.2-9.2zm0 12.5c-1.8 
      0-3.2-1.4-3.2-3.2s1.4-3.2 3.2-3.2 3.2 1.4 3.2 
      3.2-1.4 3.2-3.2 3.2z"
    />
    <circle cx="83.7" cy="80.7" r="3"/>
    <circle cx="112.7" cy="102.9" r="3"/>
    <circle cx="56.6" cy="80.7" r="3"/>
    <path 
      d="m65.5 90.2c-6.6 0-11.9 5.4-11.9 11.9s5.4 11.9 11.9 
      11.9 11.9-5.4 11.9-11.9-5.3-11.9-11.9-11.9zm0
      17.9c-3.3 0-5.9-2.7-5.9-5.9s2.7-5.9 5.9-5.9 
      5.9 2.7 5.9 5.9-2.6 5.9-5.9 5.9z"
    />
    <path 
      d="m94.1 101.9c-.6-1.6-2.3-2.3-3.9-1.8-1.6.6-2.3
      2.3-1.8 3.9l4 10.8c.4 1.2 1.6 2 2.8 2 .3 0 .7-.1 
      1-.2 1.6-.6 2.3-2.3 1.8-3.9z"
    />
    <path 
      d="m92.3 57.1 9.8 3.5c.3.1.7.2 1 .2 1.2 0 2.4-.8 2.8-2 
      .6-1.6-.2-3.3-1.8-3.8l-9.8-3.5c-1.6-.6-3.3.2-3.8
      1.8s.2 3.3 1.8 3.8z"
    />
    <path 
      d="m85 20.4c-35.6 0-64.6 29-64.6 64.6s29 64.6
      64.6 64.6 64.6-29 64.6-64.6-29-64.6-64.6-64.6zm0
      123.2c-32.3 0-58.6-26.3-58.6-58.6s26.3-58.6 
      58.6-58.6 58.6 26.3 58.6 58.6-26.3 58.6-58.6 58.6z"
    />

    <path 
      d="m85 33.2c-28.6 0-51.8 23.3-51.8 51.8s23.3 
      51.8 51.8 51.8 51.8-23.3 51.8-51.8-23.2-51.8-51.8-51.8zm0
      97.6c-25.3 0-45.8-20.6-45.8-45.8s20.5-45.8 45.8-45.8 
      45.8 20.6 45.8 45.8-20.5 45.8-45.8 45.8z"
    />
  </g>
</svg>

There are few things to do here:

• remove enable-background attribute from root element
• remove <g> tag as groups are not needed
• put <circle> elements on top and <path> elements under
• connect all paths into single one for unicolored icon
• recalculate nodes with lowering 'Precision' on SVGOMG

First three tasks are pretty straightforward, just delete the attribute and the group wrapper then re-order the elements. SVG vector will not change its look at all by doing this.

If you have multicolored icon, just don't concatenate the paths into one, just leave them as they are. You will need to convert circles to paths and then either give the id or class or fill to each path that is not black. after that you'll have to run it through the SVGOMG tool and optimise it further just like we did for the youtube icon.

When concatenating the paths into one (for unicolored icon), rule of thumb is that you can just 'merge' paths by appending the d value from one path to another. There are some exceptions like this icon. If you do that here, the path will just disappear as paths will be actually dislocated.

When d value starts with small m it means that that path starts somewhere relative to the current position (where the last one stopped), big M means it starts from absolute position (this is most common case).

So first we need to change d="m..." to d="M..." and then we can merge all paths into single one, so let's do this.

While doing so, you will notice that path that starts with d="M92 ..." looks weird, so just revert back to the small letter m in the beginning and move it all the way up as this is supposed to be path that we are beginning with and we will concatenate all other paths after this one (you don't really need to leave empty space between them, but I do).

This is not usual case and it doesn't happen very often, but I just wanted to highlight this one as the solution is rather simple - just leave it as is and put it in the front of other paths.

Code now should look like this:

<svg viewBox="0 0 170 170" xmlns="http://www.w3.org/2000/svg">
    <circle cx="109.7" cy="80.7" r="3.7"/>
    <circle cx="83.7" cy="80.7" r="3"/>
    <circle cx="112.7" cy="102.9" r="3"/>
    <circle cx="56.6" cy="80.7" r="3"/>
    <path 
      d="m92.3 57.1 9.8 3.5c.3.1.7.2 1 .2 1.2 0 2.4-.8 
      2.8-2 .6-1.6-.2-3.3-1.8-3.8l-9.8-3.5c-1.6-.
      6-3.3.2-3.8 1.8s.2 3.3 1.8 3.8z M71.7 
      54.8c-5.1 0-9.2 4.1-9.2 9.2s4.1 9.2 9.2
      9.2 9.2-4.1 9.2-9.2-4.1-9.2-9.2-9.2zm0 
      12.5c-1.8 0-3.2-1.4-3.2-3.2s1.4-3.2 3.2-3.2 
      3.2 1.4 3.2 3.2-1.4 3.2-3.2 3.2z M65.5 90.2c-6.6
      0-11.9 5.4-11.9 11.9s5.4 11.9 11.9 11.9 11.9-5.4
      11.9-11.9-5.3-11.9-11.9-11.9zm0 17.9c-3.3 0-5.9-2.
      7-5.9-5.9s2.7-5.9 5.9-5.9 5.9 2.7 5.9 5.9-2.6
      5.9-5.9 5.9z M94.1 101.9c-.6-1.6-2.3-2.3-3.9-1.
      8-1.6.6-2.3 2.3-1.8 3.9l4 10.8c.4 1.2 1.6 2 2.8
      2 .3 0 .7-.1 1-.2 1.6-.6 2.3-2.3 1.8-3.9z M85 
      20.4c-35.6 0-64.6 29-64.6 64.6s29 64.6 64.6 64.6
      64.6-29 64.6-64.6-29-64.6-64.6-64.6zm0 123.2c-32.3
      0-58.6-26.3-58.6-58.6s26.3-58.6 58.6-58.6 58.6 26.3
      58.6 58.6-26.3 58.6-58.6 58.6z M85 33.2c-28.6 
      0-51.8 23.3-51.8 51.8s23.3 51.8 51.8 51.8 51.8-23.3
      51.8-51.8-23.2-51.8-51.8-51.8zm0 97.6c-25.3 
      0-45.8-20.6-45.8-45.8s20.5-45.8 45.8-45.8 45.8 
      20.6 45.8 45.8-20.5 45.8-45.8 45.8z"
  />
</svg>

There's a lot of circles and one big path. Let's transform those circles to paths.

Open Circle/Ellipse to Path Converter and convert all circles to paths, remember that you just have to enter what you have into calculator, it is ok to leave the other fields empty.

Just copy the result and paste it in the end of the existing "big" path of your SVG and don't forget to remove circle element you just converted. Repeat until you have no more circle elements. After that run it through the SVGOMG tool to further optimise it.

Now you should have:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 170 170">
  <path d="m92.3 57.1 9.8 3.5c.3.1.7.2 1 .2a3 3 0 0 0 2.8-2c.6-1.6-.2-3.3-1.8-3.8l-9.8-3.5c-1.6-.6-3.3.2-3.8 1.8s.2 3.3 1.8 3.8zm-20.6-2.3c-5.1 0-9.2 4.1-9.2 9.2s4.1 9.2 9.2 9.2 9.2-4.1 9.2-9.2-4.1-9.2-9.2-9.2zm0 12.5c-1.8 0-3.2-1.4-3.2-3.2s1.4-3.2 3.2-3.2 3.2 1.4 3.2 3.2-1.4 3.2-3.2 3.2zm-6.2 22.9c-6.6 0-11.9 5.4-11.9 11.9S59 114 65.5 114s11.9-5.4 11.9-11.9-5.3-11.9-11.9-11.9zm0 17.9c-3.3 0-5.9-2.7-5.9-5.9s2.7-5.9 5.9-5.9 5.9 2.7 5.9 5.9-2.6 5.9-5.9 5.9zm28.6-6.2c-.6-1.6-2.3-2.3-3.9-1.8-1.6.6-2.3 2.3-1.8 3.9l4 10.8a3 3 0 0 0 2.8 2c.3 0 .7-.1 1-.2 1.6-.6 2.3-2.3 1.8-3.9zM85 20.4c-35.6 0-64.6 29-64.6 64.6s29 64.6 64.6 64.6 64.6-29 64.6-64.6-29-64.6-64.6-64.6zm0 123.2c-32.3 0-58.6-26.3-58.6-58.6S52.7 26.4 85 26.4s58.6 26.3 58.6 58.6-26.3 58.6-58.6 58.6zm0-110.4c-28.6 0-51.8 23.3-51.8 51.8s23.3 51.8 51.8 51.8 51.8-23.3 51.8-51.8S113.6 33.2 85 33.2zm0 97.6c-25.3 0-45.8-20.6-45.8-45.8S59.7 39.2 85 39.2s45.8 20.6 45.8 45.8-20.5 45.8-45.8 45.8zm21-50.1a3.7 3.7 0 1 0 7.4 0 3.7 3.7 0 1 0-7.4 0m-25.3 0a3 3 0 1 0 6 0 3 3 0 1 0-6 0m29 22.2a3 3 0 1 0 6 0 3 3 0 1 0-6 0M53.6 80.7a3 3 0 1 0 6 0 3 3 0 1 0-6 0"/>
</svg>

Since this icon is having a lot bigger viewBox="0 0 170 170" than the previous one, we will scale it down to proper size as we want to have consistency in icons that we use on the same website/app.

Our viewBox should be 0 0 24 24. Let's do a simple math.

 170 / 24 = 0.1412

That's the value of the scale (I always get best results with 4 decimal digits, just round the last digits up(next decimal is 5 or more) or down(next decimal is 4 or less)). Let's change viewBox value and apply the scale through the transform attribute.

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 24 24">
  <path 
    transform="scale(0.1412)"
    d="m92.3..."/>
</svg>

You will notice that the icon scaled as it should be, sometimes there is a need for additional translate(0,0) in order to move the whole icon to the left/right and top/bottom. Translate also receives negative values and decimals. If you need this option for your icon, have a little patience and play around until you get the hang of it.

Code for that would look something like this:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 24 24">
  <path 
    transform="scale(0.1412) translate(0,0)"
    d="m92.3..."/>
</svg>

It's all great and dandy now, but the thing is we now have transform attribute present in our SVG. Solution? Just run it through the SVGOMG and it will recalculate the nodes and remove transform. I told you, SVGOMG is awesome tool!

Multiple colors case - Dragonball Icon

If you are using round colored icons there is a simple solution that can make all this easier. Make an CSS class that has border-radius: 50% and background-color: yellow; or whatever the color you need for the background.

Now you just optimise the path that is left (in this case, a star) and put it's fill there or you could put it into CSS like this:

.icon-class {
  border-radius: 50%;
  background-color: yellow;
}

.icon-class svg path {
  fill: red;
}

Initially we have code like this:

<svg 
  width="24" 
  height="24" 
  xmlns="http://www.w3.org/2000/svg"
>
  <g 
    fill="none" 
    fill-rule="evenodd"
  >
    <path 
      d="M12 0C5.36 0 0 5.36 0 12s5.36 12 12 12 12-5.36 12-12S18.64 0 12 0z" 
      fill="#eec634"
    />
    <path 
      fill="rgba(255,0,0,0.5)" 
      d="M12 4l2.188 4.637 4.812.7-3.5 3.588.788 5.075L12 15.637 7.713 18l.787-5.075L5 9.337l4.813-.7z"
    /> 
  </g>
</svg>

I used inline-styles for this showcase below but you can, of course, use CSS class instead. After optimisation it would look something like this:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 24 24" 
  style="background-color: #eec634; border-radius:50%;"
>
  <path 
    fill="rgba(255,0,0,0.5)" 
    d="m12 4 2.19 4.64 4.81.7-3.5 3.58.79 5.08L12 15.64 7.71 18l.79-5.08L5 9.35l4.81-.7z"
  />
</svg>

On the other hand if you have something different than circle for icon outline, you can actually have that path there and just be sure that you select correct path with CSS to give it proper background-color or fill.

So is this something you find helpful or do you have different SVG optimisation technique that you use? Please share your opinions and comments below.

Also follow me for more frontend-related posts in the future.

Ivan PozderacFollow

Clean code and linter enthusiast. Geek at heart. JavaScript web developer.

This is it for now, and now it is time for shameless plug!

---

Shameless plug - Working with react? There's npm package for that!

There is a npm package available for React developers who are using SVG icons.

react-easy-icon is basically an empty component where you pass your 'single path' to the d prop and it renders. You can organise list of your SVG paths in the object and just import what you need.

Organise your icon paths like this:

const icons = {
  YOUTUBE: 'M12 0c6.64 0 12 5.36 12 12s-5.36 12-12 12S0 18.64 0 12 5.36 0 12 0zm0 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22zM8 7h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3zm2.6 2.85v4l4-2-4-2z',
  PETRI_DISH: 'm92.3 57.1 9.8 3.5c.3.1.7.2 1 .2a3 3 0 0 0 2.8-2c.6-1.6-.2-3.3-1.8-3.8l-9.8-3.5c-1.6-.6-3.3.2-3.8 1.8s.2 3.3 1.8 3.8zm-20.6-2.3c-5.1 0-9.2 4.1-9.2 9.2s4.1 9.2 9.2 9.2 9.2-4.1 9.2-9.2-4.1-9.2-9.2-9.2zm0 12.5c-1.8 0-3.2-1.4-3.2-3.2s1.4-3.2 3.2-3.2 3.2 1.4 3.2 3.2-1.4 3.2-3.2 3.2zm-6.2 22.9c-6.6 0-11.9 5.4-11.9 11.9S59 114 65.5 114s11.9-5.4 11.9-11.9-5.3-11.9-11.9-11.9zm0 17.9c-3.3 0-5.9-2.7-5.9-5.9s2.7-5.9 5.9-5.9 5.9 2.7 5.9 5.9-2.6 5.9-5.9 5.9zm28.6-6.2c-.6-1.6-2.3-2.3-3.9-1.8-1.6.6-2.3 2.3-1.8 3.9l4 10.8a3 3 0 0 0 2.8 2c.3 0 .7-.1 1-.2 1.6-.6 2.3-2.3 1.8-3.9zM85 20.4c-35.6 0-64.6 29-64.6 64.6s29 64.6 64.6 64.6 64.6-29 64.6-64.6-29-64.6-64.6-64.6zm0 123.2c-32.3 0-58.6-26.3-58.6-58.6S52.7 26.4 85 26.4s58.6 26.3 58.6 58.6-26.3 58.6-58.6 58.6zm0-110.4c-28.6 0-51.8 23.3-51.8 51.8s23.3 51.8 51.8 51.8 51.8-23.3 51.8-51.8S113.6 33.2 85 33.2zm0 97.6c-25.3 0-45.8-20.6-45.8-45.8S59.7 39.2 85 39.2s45.8 20.6 45.8 45.8-20.5 45.8-45.8 45.8zm21-50.1a3.7 3.7 0 1 0 7.4 0 3.7 3.7 0 1 0-7.4 0m-25.3 0a3 3 0 1 0 6 0 3 3 0 1 0-6 0m29 22.2a3 3 0 1 0 6 0 3 3 0 1 0-6 0M53.6 80.7a3 3 0 1 0 6 0 3 3 0 1 0-6 0'
}
export default icons

Then use it in combination with the react-easy-icon component:

import ReactEasyIcon from "react-easy-icon";
import icons from "./icons";

export default function App() {
  return (
    <div className="App">
     <ReactEasyIcon d={icons.YOUTUBE} />
     <ReactEasyIcon d={icons.PETRI_DISH} width={64} color={"orange"} />
    </div>
  );
}

If you want to try it online, head over to the codesandbox example

You can see it also on npm and github

react-easy-icon - npm

Simple react SVG icon component. Latest version: 1.0.4, last published: 2 years ago. Start using react-easy-icon in your project by running `npm i react-easy-icon`. There are no other projects in the npm registry using react-easy-icon.

npmjs.com

jambox-digital / react-easy-icon

Simple react SVG icon component

react-easy-icon - reusable SVG icon component

I am using this approach for all kinds of icons in any project that uses react or react based libraries/frameworks for frontend.

This package was created to make using SVG's as icons easier and to eliminate the need to reinvent the wheel on every project again and again.

What problem the package solves

It is highly reusable and since it is customizable it can be used standalone but also as a part of other component.

This component is used as a generic icon container without the path.

Paths of icons can be listed in the object and then we can import just the icons we need to fill that generic icon container.

Limitation of react-easy-icon component

Since this component is using single SVG path for creating the icon, all icons intended for use have to be optimized.

I wrote an article on how to…

View on GitHub