Selleo Labs spółka z o.o.

I am a design Tech Expert, helping CTOs, Development Leads and Product Owners by participating in the full lifecycle of projects from initial requirement gathering and planning, through development, internal demonstrations and finally deployment. I shape, sculpt and visualise the product and its branding across multiple platforms.

Arkadiusz Janik

[TOC]

The inlined **SVG icons** are currently the best way to use icons on the web. They work on every browser, are fully controllable by CSS, they’re faster as there’s no additional request to the server, so no flash of invisible icons either. If you’re not familiar with that approach or still need convincing, check out this great [article](https://css-tricks.com/pretty-good-svg-icon-system/) on CSS Tricks. But how should we prepare and use the **inline SVG icons**?

## Design

I prefer to design in **Sketch**, but any vector design tool will be good if you just can zoom in and display the pixel grid.

I start by creating an artboard. 24x24px is usually my default grid size, but if you prefer a bit smaller icons 20x20 is also fine. For your icons to look crisp and pixel-perfect, make sure to:

* display them at least at the grid size
* position the item on full pixels only (integers)
* use integers for the border width too

Sketch’s _Arrange_ -> _Round to Pixel_ option can be helpful with fixing the alignment. Otherwise, the icon will look blurry - compare the left, pixel-perfect side of the icon with the right:

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/800x400/386018646f/image2.png)

To maintain a consistent look across your icons use the same line weights, line ends and joins, border radiuses. If you’re going for multicolor (which was not so easy to achieve with font-icons) make sure that you’re not picking a random color every time you want to add a tint, work with a prepared palette.

When you have finished your new shiny icon, it’s time to clean it up a bit. Convert strokes to outlines. If you rotated your icon, flatten it before exporting. This will remove any of the unnecessary transforms in exported svg. Export the whole 24x24px artboard, not just the icon - which could be smaller and not square but rectangular.

## Export

We want to make the final file as small as possible. We already did what we could in Sketch, now it’s time to reach for a nifty compressing tool. [SVGOMG](https://jakearchibald.github.io/svgomg/) is a web-based SVGO implementation that is easy and fast to use, so that would be my choice.

How to use it? Drag and drop your icon, check all Features except _Remove xmlns_ and _Remove viewBox_. Adjust Precision so there’s no visible change when you switch the level. 2 or 3 is usually the sweet spot (in case of the Octocat below, it’s 2):

![](https://s3.amazonaws.com/a.storyblok.com/f/86602/800x600/c22f1e2cae/image1.gif)

SVGO does a really good job, but we can improve it more. In case of a simple, one color icon this is what we got:

<Gist id="db4b623ba7401e6d0fdf264d6c58f99c" />

We can remove unnecessary groups, defs, styles. Remove fills as these will be added in CSS for easier control of color (you want to keep them in case of a multicolor icon). Inside _path_ tag you can probably remove the fill-rule. What you want to achieve is a _path_ with just a _d_ attribute inside, like: <path d="M3,3 L3,1..

As the last thing we can remove the _xmlns_, so only the _viewBox_ remains. This will break the preview of your icons, but don’t worry! We don’t need _xmlns_ as we are going to be inlining our icons. It’s only required if we wanted to load the images separately, eg. as a background. Here’s a small comparison, first we have the original Sketch file:

<Gist id="fb3a2582bd0f0e7f43aee1a9e5dea4aa" />

And the result after compressing:

<Gist id="b3210f41e5c819acd25efed6922f026a" />

## React

Finally, let’s create a **React** component inside src/components/icons/ and name it IconAdd.js. Replace the <path /> with the one from your SVG and set the proper viewBox. Your component should look like this:

<Gist id="3b2afdc092d162e16799d42caf3f2297" />

We will enable passing a className to the icon. Applying CSS to the icon is crucial as it does not have any defined size, and will not work without a set height/width. We can also change the color of the icon in CSS, by using the _fill_ property.

Then import your icon inside the component where you want to use it:

<Gist id="07bde552e40080599054711cc4119385" />

**That’s it! Happy designing and/or implementing! :)**

Need help with your [React](https://selleo.com/react-expert-developers-team) project? Or maybe [UX/UI](https://selleo.com/ux-design)? Feel free to contact us!

The inlined SVG icons are currently the best way to use icons on the web. If you’re not familiar with that approach or still need convincing, check out this great article on CSS Tricks. But how should we prepare and use the inline SVG icons?

Do you want

Read Our Blog.
Make better products with us.

Read our articles on Selleo Blog

Business

Technology

SVG Icons - From Sketch to React

Tell us about your project

Company

Our Services

Blog

Other Services

Countries

Awards & Certificates