Icons with editable stroke

On Freepik you can download two versions of SVG files - simplified and with editable strokes. This article explains how to find icons with editable stroke, the difference between the editable and simplified versions, how to download them and how to work with editable strokes.

How to find icons with editable strokes

To find icons with editable strokes and shapes, select the Stroke filter in the search.

Editable strokes vs. simplified SVG file

If you’re unsure which SVG file type is the most suitable for your use, the difference between these two is explained below.

Simplified (Expanded) SVG

Simply put, expanding an element means turning it into a flat shape. Turning icon elements into flat shapes, especially strokes, makes the SVG file less flexible for customization. You can still recolor and resize the files, but you won’t be able to edit the stroke width and work with the lines as if they were lines because, thanks to the expansion, they are not lines anymore.

Download the simplified version if you don’t want to change the icons’ stroke width. You can still change its color and size.

Editable stroke (Non-expanded) SVG

The non-expanded SVG is a version that keeps the elements in the form they were created in. This means that the icons are easier to edit. Most importantly - strokes are staying strokes, which lets you adjust them to your exact needs.

Download the editable strokes version if you want to adjust the stroke width or make changes to the icon’s shapes and line curves.

How to work with strokes in the icon editor

You can adjust the stroke width directly in the icon editor. Enter the pixels manually or adjust the thickness with the slider.

How to edit strokes in Figma

Editable stroke also bring opportunities for more advanced editing in other vector friendly tools. Here are a few tips on how to adjust the strokes in Figma.

Changing the stroke width

To adjust the stroke width, you can manually edit the pixels on the right side panel or you can click on the stroke size and drag the cursor sideways to increase or decrease the stroke width.

Curving the strokes

Since the strokes are kept at their original form, you can curve them to fit your designs more. Use the appropriate tool in the software you are working in. For example the bend tool in Figma.

Reshaping strokes

You can easily move around the nodes of the icon elements and change the shapes to fit your needs. For example, if you want to enlarge a certain part of an icon, like in the video below.

Resizing the icon

If you are making the icon smaller or bigger and want to keep the strokes-to-icon-size ratio, use the scale tool to do that. You will notice that the pixels of the stroke width are changing with the size of the icon.
Resizing with the scale tool

If you want to keep the stroke width a certain pixel size and resize the icon, don’t use the scaling tool, but a regular move tool and hold shift on your keyboard to keep the shapes undisrupted.
Resizing with the move tool