A large number of sizes of svg icons, what to do?

Question

css

There are 30 icons of the same size. But different places of use need different sizes. How to be? You need to prepare icons for small/medium/large sizes and pack all sizes in a sprite, right? Or is it possible to resize somehow?

Answer 1

Use svg symbol or defs, use css to set sizes and fill, etc.
codepen.io/Zoxon/pen/PNeJOx?editors=1100
Or use a sprite, where icon sizes can be set using background-size, but the fill cannot be controlled
Icon fonts I do not recommend using

Answer 2

IMHO the most practical way to use svg icons is with icon fonts. For example, on icomoon.io, we create an icon font and connect it to the site.
Further, to insert an icon in the right place of the html page, it is enough to write ("icon-*" - the class of the desired icon from the font). And with the help of regular CSS (font-size, color, etc.) we set the size, color ... both individually and in groups, this is already as your heart desires.