How to make the icons look clear?

Question

Design

The icons on the site look blurry, I took them from the layout, they are in png format. Here's an example:



In the mobile version, it generally looks bad.

I noticed on one site, all the icons are in svg format, they look clear, without blur.

<i class="svg inline  svg-inline-tizer_svg" aria-hidden="true"><svg data-name="Group 9 copy" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><defs><style>.cls-1,.cls-2{fill:#307fdd;fill-rule:evenodd}.cls-2{opacity:.1}</style></defs><path data-name="Rounded Rectangle 24 copy" class="cls-1" d="M974,85h-1l-4,4h-1l-1-1V85h-2.1a11.879,11.879,0,0,0,.709-2H968l1,1v2.344L972.266,83H974a2,2,0,0,0,2-2V64a2,2,0,0,0-2-2H942a2,2,0,0,0-2,2V81a2,2,0,0,0,2,2h0.393a11.879,11.879,0,0,0,.709,2H942a4,4,0,0,1-4-4V64a4,4,0,0,1,4-4h32a4,4,0,0,1,4,4V81A4,4,0,0,1,974,85Zm-33.9,7.159c0.01,0,.016-0.011.025-0.014l7.9-2.87c0-.093-0.028-0.181-0.028-0.275V86.7a8.976,8.976,0,0,1-2.954-5.8A1.483,1.483,0,0,1,944,79.5v-3a1.488,1.488,0,0,1,1-1.4V71a6,6,0,0,1,6-6h6a6,6,0,0,1,6,6v4.1a1.488,1.488,0,0,1,1,1.4v3a1.483,1.483,0,0,1-1.046,1.408A8.976,8.976,0,0,1,960,86.7V89c0,0.094-.023.182-0.028,0.275l7.9,2.87c0.009,0,.015.01,0.025,0.014A2.984,2.984,0,0,1,970,95v2a3,3,0,0,1-3,3H941a3,3,0,0,1-3-3V95A2.984,2.984,0,0,1,940.1,92.159ZM950,68V67.141A3.991,3.991,0,0,0,947,71h0a3.972,3.972,0,0,0,3.181-1.6A5.916,5.916,0,0,1,950,68Zm11,3a4,4,0,0,0-4-4h-5v1a4,4,0,0,0,4,4h3a3.959,3.959,0,0,0,2-.555V71Zm0,9V79a1,1,0,0,0,0-2V73.633A5.942,5.942,0,0,1,959,74h-3a5.992,5.992,0,0,1-4.946-2.609A5.92,5.92,0,0,1,947,73h0v4a1,1,0,0,0,0,2v1A7,7,0,0,0,961,80Zm-11,8.062V89a4,4,0,0,0,8,0V88.062A9,9,0,0,1,950,88.062ZM940,97h0a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V95a0.986,0.986,0,0,0-.788-0.957l0-.012-7.659-2.782a5.99,5.99,0,0,1-11.112,0l-7.659,2.782,0,0.012A0.986,0.986,0,0,0,940,95v2Zm18-18h-1a1,1,0,0,1,0-2h1A1,1,0,0,1,958,79Zm-1.716,2.307a1,1,0,1,1,1.43,1.39l0.01,0.01A5.617,5.617,0,0,1,953.973,84a5.424,5.424,0,0,1-3.677-1.28l0.007-.006a0.995,0.995,0,1,1,1.435-1.375l0,0A3.206,3.206,0,0,0,954,82a3.106,3.106,0,0,0,2.282-.695ZM951,79h-1a1,1,0,0,1,0-2h1A1,1,0,0,1,951,79Z" transform="translate(-938 -60)"></path><path data-name="Rounded Rectangle 30" class="cls-2" d="M977,80v3l-1,1h-3l-3,3h-1a2,2,0,0,1-2-2V67a2,2,0,0,1,2-2h7a2,2,0,0,1,2,2V80h-1Zm-8,14v3l-1,2H940l-1-1,13-5,1,1,2,2h3l4-3,2-1,3,1ZM956,73l-3-1-1-1-1-2V66h6l4,1,1,2v4h-6Z" transform="translate(-938 -60)"></path></svg>
</i>

Maybe someone knows how to effectively deal with poor quality icons or correctly convert to svg format as in the example above from png?

Online services do not cope well with this.

Answer 1

You should not hope that taking a raster image you can get a vector one. Yes, you can, but it's a full house, usually the other way around. Therefore:
1. It's not difficult to draw an average flag by hand in any vector format image editor, from AI to Inkscape. And some types of Russia, Ukraine can generally be drawn programmatically, these are 3 and 2 polygons, respectively.
2. Almost always, and all the flags can be found already in the finished svg format somewhere on the Internet. For example here .