Design a Heroicons like SVG icon with Inkscape

Sep 06, 2024 Inkscape SVG

Since a few month I try to refactor a few of my web projects. Part of this also involves changes to the design. A topic that I actually like, but have to admit to myself that I'm not good at it. That's why I was very happy about the emergence of Bootstrap and Font Awesome back then. Libraries that you simply use and that's it. For the new design revision, however, I would like to build on Tailwind CSS and Heroicons. But for one of my projects I need a customized icon. I would like to show you how I do it.

Examination of a Heroicons

I would like to create a icon in Mini style, i.e. 20x20 filled out.

Mini

I will therefore examine a icon of this type. The choice fell on academic-cap. I saved the copied content as academic-cap-mini.svg and looked at it once with Inkscape.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
    <path fill-rule="evenodd" d="M9.664 1.319a.75.75 0 0 1 .672 0 41.059 41.059 0 0 1 8.198 5.424.75.75 0 0 1-.254 1.285 31.372 31.372 0 0 0-7.86 3.83.75.75 0 0 1-.84 0 31.508 31.508 0 0 0-2.08-1.287V9.394c0-.244.116-.463.302-.592a35.504 35.504 0 0 1 3.305-2.033.75.75 0 0 0-.714-1.319 37 37 0 0 0-3.446 2.12A2.216 2.216 0 0 0 6 9.393v.38a31.293 31.293 0 0 0-4.28-1.746.75.75 0 0 1-.254-1.285 41.059 41.059 0 0 1 8.198-5.424ZM6 11.459a29.848 29.848 0 0 0-2.455-1.158 41.029 41.029 0 0 0-.39 3.114.75.75 0 0 0 .419.74c.528.256 1.046.53 1.554.82-.21.324-.455.63-.739.914a.75.75 0 1 0 1.06 1.06c.37-.369.69-.77.96-1.193a26.61 26.61 0 0 1 3.095 2.348.75.75 0 0 0 .992 0 26.547 26.547 0 0 1 5.93-3.95.75.75 0 0 0 .42-.739 41.053 41.053 0 0 0-.39-3.114 29.925 29.925 0 0 0-5.199 2.801 2.25 2.25 0 0 1-2.514 0c-.41-.275-.826-.541-1.25-.797a6.985 6.985 0 0 1-1.084 3.45 26.503 26.503 0 0 0-1.281-.78A5.487 5.487 0 0 0 6 12v-.54Z" clip-rule="evenodd" />
</svg>

A closer look at the outline view reveals that the icon is actually defined by non-existent lines. So we actually only see the negative.

Solid

I actually wanted to switch to the outline icon at this point. However, I realized that the mini icon is not only smaller but also really simpler. This is actually also clear, as it would make no sense to publish scalable images in an extra smaller scaled version. I also saved the solid icon as an academic-cap-solid.svg.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
    <path d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" />
    <path d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" />
    <path d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" />
</svg>

Outline

The outline variation is really the original version for the solid one. I also saved the outline icon as an academic-cap-outline.svg.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
</svg>

Something that you can actually already see in the source code, but becomes even clearer in Inkscape, the icon is actually just a path with a stroke-width of 1.5, stroke-linecap and stroke-linejoin of value round.

Nelumbo or lotus flower icon

The icon I would like to realize is a icon of a nelumbo or lotus flower.

Designing a lotus flower icon in Inkscape

I may not go into every detail in the following, but I will roughly describe how I design a icon of a lotus plant in Inkscape.

Inkscape document outline icon properties

Let us create a new document in Inkscape. Please make sure to adjust the following properties on the document. Afterwards zoom to the full page.

General
- Display units: px
Custom size
- Width: 24
- Height: 24
- Units: px
Scale
- Scale x: 1

Create lotus leaf

Then we create a circle, duplicate it once and move the copy a little horizontally.

We then select both circles and use the Intersection tool under the Path menu item. The result should be a simplified lotus leaf.

From the leaf to a plant

Then we duplicate the sheet and rotate the copy by 35 degrees. Now we move the copy so that both leaves have the same root. We duplicate the original leaf again and use the Difference tool under the Path menu item to subtract the original leaf from the rotated copy.

We can now rotate the duplicated leaf again by 35 degrees. We do the same thing twice on the other side, but at 35 degrees in the other direction.

Now select all the leaves and use the Combine tool under the Path menu item to join them together. We then scale the element to about 95 percent of the available width and center it. Since all icons of Heroicons actually use a square space, I stretch my icon a little. Afterwards I made the following changes under Fill and Stroke.

Fill: No paint
Stroke paint: Flat color
Stroke style:
- Width: 1.5 px
- Join: Round join
- Cap: Round cap

From Inkscape SVG to Heroicons style

I saved the lotus icon in Inkscape as Plain SVG lotus-inkscape.svg. I had to remove the height and width properties so that the SVG scales here in the browser. The size of this file are 2.593 bytes. The academic-cap from Heroicons in the outline version has only 719 bytes.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
    viewBox="0 0 24 24"
    version="1.1"
    id="svg5"
    inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
    sodipodi:docname="lotus-inkscape.svg"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
    <sodipodi:namedview
        id="namedview7"
        pagecolor="#ffffff"
        bordercolor="#cccccc"
        borderopacity="1"
        inkscape:pageshadow="0"
        inkscape:pageopacity="1"
        inkscape:pagecheckerboard="0"
        inkscape:document-units="px"
        showgrid="false"
        units="px"
        width="24px"
        inkscape:zoom="44.416667"
        inkscape:cx="11.988743"
        inkscape:cy="12"
        inkscape:window-width="2560"
        inkscape:window-height="1317"
        inkscape:window-x="0"
        inkscape:window-y="0"
        inkscape:window-maximized="1"
        inkscape:current-layer="layer1" />
    <defs
        id="defs2" />
    <g
        inkscape:label="Layer 1"
        inkscape:groupmode="layer"
        id="layer1">
    <path
        id="path1004"
        style="fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
        d="m 0.89363107,14.457797 a 9.3150651,14.39225 0 0 0 4.82900323,6.23089 9.3150651,14.39225 0 0 0 6.2748377,0.02744 A 9.3150651,14.39225 0 0 1 6.8688046,15.132481 9.3150651,14.39225 0 0 1 6.4822782,14.173698 9.3150651,14.39225 0 0 0 0.89363107,14.457797 Z M 5.2250453,5.7493197 A 9.3150651,14.39225 0 0 0 6.8676113,15.132852 9.3150651,14.39225 0 0 0 11.997472,20.716117 9.3150651,14.39225 0 0 1 9.8691544,11.597216 9.3150651,14.39225 0 0 1 9.908462,10.469286 9.3150651,14.39225 0 0 0 5.2250453,5.7493197 Z M 23.106369,14.484448 a 9.3150651,14.39225 0 0 0 -5.589793,-0.311824 9.3150651,14.39225 0 0 1 -0.390438,0.959852 9.3150651,14.39225 0 0 1 -5.128666,5.583641 9.3150651,14.39225 0 0 0 6.274835,-0.02744 9.3150651,14.39225 0 0 0 4.834062,-6.204229 z M 18.783937,5.7666724 a 9.3150651,14.39225 0 0 0 -4.694651,4.6982716 9.3150651,14.39225 0 0 1 0.0365,1.132272 9.3150651,14.39225 0 0 1 -2.128317,9.118901 9.3150651,14.39225 0 0 0 5.129859,-5.583265 9.3150651,14.39225 0 0 0 1.656606,-9.3661796 z M 12.005894,2.4566242 a 9.3150651,14.39225 0 0 0 -2.1367396,9.1405918 9.3150651,14.39225 0 0 0 2.1283176,9.118901 9.3150651,14.39225 0 0 0 2.128317,-9.118901 9.3150651,14.39225 0 0 0 -2.119895,-9.1405918 z" />
    </g>
</svg>

As the file size was still too large, I simply copied the d property from the path of lotus-inkscape.svg and replaced it in the same place in academic-cap-outline.svg. The new icon has now a size of 1.453 bytes.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="m 0.89363107,14.457797 a 9.3150651,14.39225 0 0 0 4.82900323,6.23089 9.3150651,14.39225 0 0 0 6.2748377,0.02744 A 9.3150651,14.39225 0 0 1 6.8688046,15.132481 9.3150651,14.39225 0 0 1 6.4822782,14.173698 9.3150651,14.39225 0 0 0 0.89363107,14.457797 Z M 5.2250453,5.7493197 A 9.3150651,14.39225 0 0 0 6.8676113,15.132852 9.3150651,14.39225 0 0 0 11.997472,20.716117 9.3150651,14.39225 0 0 1 9.8691544,11.597216 9.3150651,14.39225 0 0 1 9.908462,10.469286 9.3150651,14.39225 0 0 0 5.2250453,5.7493197 Z M 23.106369,14.484448 a 9.3150651,14.39225 0 0 0 -5.589793,-0.311824 9.3150651,14.39225 0 0 1 -0.390438,0.959852 9.3150651,14.39225 0 0 1 -5.128666,5.583641 9.3150651,14.39225 0 0 0 6.274835,-0.02744 9.3150651,14.39225 0 0 0 4.834062,-6.204229 z M 18.783937,5.7666724 a 9.3150651,14.39225 0 0 0 -4.694651,4.6982716 9.3150651,14.39225 0 0 1 0.0365,1.132272 9.3150651,14.39225 0 0 1 -2.128317,9.118901 9.3150651,14.39225 0 0 0 5.129859,-5.583265 9.3150651,14.39225 0 0 0 1.656606,-9.3661796 z M 12.005894,2.4566242 a 9.3150651,14.39225 0 0 0 -2.1367396,9.1405918 9.3150651,14.39225 0 0 0 2.1283176,9.118901 9.3150651,14.39225 0 0 0 2.128317,-9.118901 9.3150651,14.39225 0 0 0 -2.119895,-9.1405918 z" />
</svg>

The final Heroicons like lotus icon

Here is the final Heroicons like lotus icon with a height and width of 24px.