Icon University

How to customize vector icons lines for your project

Use the flexibility of vector editable strokes, to change thickness, change corners, or reshape icons.

Inconsistent icons hurt your brands and projects.

You can find icons with the right concept or metaphors, but if they’re made of line with different thicknesses that you cannot do anything about, you’re bringing in a disaster.

You want your icons to be editable so that you can customize them to your different needs and make sure they have unified look. We’ll show you how.

Know what your icons are made of

There are two kinds of strokes that make up Line icons: outlined and editable.

Outlined strokes have no actual stroke.

The original strokes have been expanded into flat shapes, making them much less editable. You can still resize icons with outlined stroke and change their colors, but that’ all. You won’t be able to customize the strokes because there's no stroke.

Editable strokes are flexibly customizable.

Unlike the outlined one, the strokes stay as strokes. Not just resizing and changing their colors, you can also adjust their thickness, change their ends, or turn them into curves. It almost feels like a magic compared to the outlined one.

The perks of having editable strokes

If you want to be able to customize your line icons, you need to make sure that their strokes are editable. These kinds of strokes give you more control on how your icons look. More parts of the icons become editable, making them more customizable.

1. Adjustable thickness

The basic feature of icons with editable strokes makes it possible to adjust their thickness to your exact need. You can adjust icons with regular stroke width to have bolder or lighter look. It’s all on your fingertips.

With editable stroke, adjusting icon's thickness to specific needs can be done effortlessly.

Reducing the stroke thickness of an icon will give it a lighter look.

On the other hand, increasing the thickness will give the icon a heavier look.

...

2. Changeable caps and join

When the strokes are not outlined, their caps and joins are also customizable. You can change them, turn them from round to square, and vice versa. It's tweaking your icons on atomic levels, making them unique to the smallest details.

Caps are the start and end points of a stroke, and join is the point where two strokes meet. Editable strokes make those parts changeable.

Bevel joins give an icon a tapered look on their corners.

Round joins make icons' corners look smoother.

...

3. Customizable corners

Editable strokes also mean customizable corners, which means you can adjust the roundness look of your icons. You can turn icons with sharp corners into icons with different levels of roundness by adjusting their corner radius.

Mind you, this option to customize corners is available especially for joins that have not yet turned to curves.

Unlike the round joins that only smoothen the joins of an icon, increasing their corner radius turn the angular corners into curves.

A little change on the corner radius turn the originally sharp icon into a new icon with a new style that could fit to an entierely different kind of projects.

The rounder the corners, the more distinct it becomes from the original icon. What was once sharp and serious now gives out a friendly and playful vibe.

...

4. Easier to reshape

When the strokes are editable, reshaping the icons also becomes more convenient.

Easily turn straight lines into curves? Tweak the shape of an icon into an entirely different style? Such superpower only available if your strokes are editable.

The magic of editable strokes give you a superpower to transform basic icons to whatever you want (and nope, it's not limited to just irregular and curved styles).

Just by tilting the lines that make up an icon, you can give it a whole new stylish look.

Additional nodes and curves can also turn the basic icon into a new icon with curvy look.

One stroke to rule them all

A direct result from having editable strokes is a better compatibility.

Using varied stroke widths, you can give the icons different thicknesses that could flexibly fit to the unique moods or themes on different projects.

And you can really do that with a single editable stroke. There’s no need for different files just to have icons with varied thickness.

Just like a typeface, different weights can be applied to icons, making them more adaptive to projects with different moods and themes.

Different cases for different weights

1. The basic and neutral

Like a typeface with regular weight, it’s the basic thickness for most line icons. It’s the most compatible and most neutral. It’s the default and safe choice if you’re not sure with the other options.

Icons with regular stroke thickness are something that you want to use on a page where a lot of information is displayed like the general navigational interface, sidebar, or menu.

You want them to be clearly visible without causing any distractions. You want them to blend so well with the other design elements without making them hard to find.

Sharp Line on an online banking app interface, they make the section easily recognizable despite the relatively high amount of information being displayed.

On an email app, Core Line with regular thickness keeps the buttons visible without being a distraction to users during the writing process.

2. The bold and chunky

Bolder strokes make icons more noticeable. Icons with this stroke thickness will catch your attention when displayed with other design elements that not as bold and not as visually heavy as them.

Like a bold typeface, you can use bold icons as a display element like when showcasing product details and features. They will draw user’s attention before leading it to information that comes with them.

Plump Duo with thicker strokes give a visually pleasing impression and a brief illustration about the app content.

The bolder version Ultimate Regular icons set themselves apart from the other chart elements so they're more recognizable.

3. The light and delicate

Thin strokes has the least visibility compared to the other widths. Yet they show the highest level of simplicity. Adjusted to the right level of lightness, they can give a touch of aesthetic and elegance to an interface.

Light icons have their own place on minimalistic interfaces that display only limited amount of information. With less information fighting for attention, you can use them either to display product details and features or put them or as navigational buttons.

The lighter version of Platinum icons give a matching elegant look to the already sophisticated interface of a jewelry store.

With thinner stroke, the originally bold Plump Line icons complement the lifestyle blog with a touch of chic aesthetic.

P.S.

Like evolution, only the most adjustable icons will survive in different conditions. It’s survival of the fittest—the most compatible. And editable stroke is the key for better compatibility.

Get your icons with editable strokes on our huge library, and start leveling up your projects.