Где брать svg, png иконки и как их использовать для разных разрешений экрана?

где именно искать версии картинок в 2x, 3x? Их дизайнер сам добавляет в макет? Или это ищешь самостоятельно?

PNG иконки

Если это иконки png, то достаточно много пакетов иконок в сети, где включены несколько папок с размерами 32. 64, 128, 256px

Если нужно, свою, родную иконку в нескольких вариантах размеров, то можно в Photoshop или в другом растровом редакторе сделать это. Буквально в несколько кликов, - нужно только выставить в меню изменения размеров требуемые цифры.

SVG иконки

Сначала ссылки на ресурсы, где достаточно много иконок и изображений SVG

1. http://thenewcode.com/assets/svg/

2. http://svg-whiz.com/svg/

3. https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/

4. https://twemoji.maxcdn.com/svg/1f698.svg

В п.4 нет открытого каталога со списком иконок, но их можно посмотреть и скачать, если в браузерной строке поиска подставлять цифры с 300 до 699

https://twemoji.maxcdn.com/svg/1f301.svg

Пример, как использовать одну и ту же иконку с разными выводимыми размерами

Допустим вы скачали иконку андроида

Код иконки:

<svg xmlns="http://www.w3.org/2000/svg" width="35%" height="35%" viewBox="0 0 96 105">
  <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
</svg>

Необходимо её немного доработать:

1.Обернуть код в тег <symbol id="icon">

2. И далее, ей можно многократно использовать, вызывая командой <use>

       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105" >
         <symbol id="icon" viewBox="0 0 96 105"> 
        <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
           <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
           <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
         </g>
         <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
         <g fill="#FFF">
           <circle cx="36" cy="22" r="2"/>
           <circle cx="59" cy="22" r="2"/>
         </g>
         </symbol> 
           
        <use xlink:href="#icon" x="0" width="30%" height="30%"  /> 
           <use xlink:href="#icon" x="25" width="20%" height="20%" />
             <use xlink:href="#icon" x="42 " width="10%" height="10%" /> 
               <use xlink:href="#icon" x="52" width="5%" height="5%" />
       </svg>