What should be considered when choosing an SVG icon pack?

Question

There are many packages designed using "PATH" or "STROKE".

For example: Bootstrap and Feathericons (My favorites) But both of them have obtained packages using different techniques.

• Bootstrap: 16x16 based PATH icons (Outline & Filled mixed)
• Feathericons: 24x24 based STROKE icons (Outline only)

At this point, Bootstrap has a very bad pixel loss (blurring) compared to Feather when you do not use 16/32/64px and its multiples. But Feather icons start to blur when you need an icon of 20px and below.

Actually, my question is this:

• If I want to obtain a package that is planned to be used in the range of 16 - 32px, which is the most efficient technique? (PATH / STROKE)
• Also, for example, if we make the combination "24x24px + STROKE" as "96x96px", would it give sharper lines on 24x24px?

Answer 1

If these icons are pixel perfect, then you will need to use multiples of the original size, otherwise they won't be pixel perfect. Think about it. Half pixels don't exist. If you use sizes that are not multiples, you will get anti-aliasing. It's not "blurring", nor is it "pixel loss". SVGs have no pixels.

One solution might be to instead design pixel perfect icons at the exact size you need, or edit the existing icons in a vector image editor to ensure they are the size you need. Since they are already SVGs, this should be fairly easy.