Отличаются они ВРОДЕ только цветом, но я не понимаю как их можно сделать более уникальными, и обойтись одним SVG которой я могу просто подставлять цвет.
Еще хотел узнать, почему размер "иконки" 80x80, а вытаскивается 121x121.
body { background-color: #090909; }
<!-- red -->
<svg width="121" height="122" viewBox="0 0 121 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_bd_253_4876)">
<path d="M60 95.625C82.0914 95.625 100 77.7164 100 55.625C100 33.5336 82.0914 15.625 60 15.625C37.9086 15.625 20 33.5336 20 55.625C20 77.7164 37.9086 95.625 60 95.625Z" fill="url(#paint0_linear_253_4876)" />
<path d="M60.5 95.625C82.3152 95.625 100 77.9402 100 56.125C100 34.3098 82.3152 16.625 60.5 16.625C38.6848 16.625 21 34.3098 21 56.125C21 77.9402 38.6848 95.625 60.5 95.625Z" stroke="white" stroke-opacity="0.6" />
</g>
<g opacity="0.4" filter="url(#filter1_d_253_4876)">
<path d="M60 84.625C76.0163 84.625 89 71.6413 89 55.625C89 39.6087 76.0163 26.625 60 26.625C43.9837 26.625 31 39.6087 31 55.625C31 71.6413 43.9837 84.625 60 84.625Z" fill="url(#paint1_linear_253_4876)" />
</g>
<g opacity="0.4" filter="url(#filter2_d_253_4876)">
<path d="M59.5 80.625C73.5833 80.625 85 69.2083 85 55.125C85 41.0417 73.5833 29.625 59.5 29.625C45.4167 29.625 34 41.0417 34 55.125C34 69.2083 45.4167 80.625 59.5 80.625Z" fill="url(#paint2_linear_253_4876)" />
</g>
<g opacity="0.4" filter="url(#filter3_d_253_4876)">
<path d="M59.5 76.625C71.3741 76.625 81 66.9991 81 55.125C81 43.2509 71.3741 33.625 59.5 33.625C47.6259 33.625 38 43.2509 38 55.125C38 66.9991 47.6259 76.625 59.5 76.625Z" fill="url(#paint3_linear_253_4876)" />
</g>
<g opacity="0.4">
<path d="M60.5 71.625C69.0604 71.625 76 64.6854 76 56.125C76 47.5646 69.0604 40.625 60.5 40.625C51.9396 40.625 45 47.5646 45 56.125C45 64.6854 51.9396 71.625 60.5 71.625Z" fill="url(#paint4_linear_253_4876)" />
</g>
<defs>
<filter id="filter0_bd_253_4876" x="-40" y="-44.375" width="200.5" height="200.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="30" />
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_253_4876" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="5" />
<feGaussianBlur stdDeviation="10" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.768627 0 0 0 0 1 0 0 0 0.4 0" />
<feBlend mode="normal" in2="effect1_backgroundBlur_253_4876" result="effect2_dropShadow_253_4876" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_253_4876" result="shape" />
</filter>
<filter id="filter1_d_253_4876" x="21" y="16.625" width="78" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
</filter>
<filter id="filter2_d_253_4876" x="24" y="19.625" width="71" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
</filter>
<filter id="filter3_d_253_4876" x="28" y="23.625" width="63" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0.227451 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4876" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4876" result="shape" />
</filter>
<linearGradient id="paint0_linear_253_4876" x1="60" y1="15.625" x2="60" y2="95.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint1_linear_253_4876" x1="60" y1="26.625" x2="60" y2="84.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint2_linear_253_4876" x1="59.5" y1="29.625" x2="59.5" y2="80.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint3_linear_253_4876" x1="59.5" y1="33.625" x2="59.5" y2="76.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint4_linear_253_4876" x1="60.5" y1="40.625" x2="60.5" y2="71.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
</defs>
</svg>
<!-- green -->
<svg width="121" height="122" viewBox="0 0 121 122" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_bd_253_4933)">
<path d="M60 95.625C82.0914 95.625 100 77.7164 100 55.625C100 33.5336 82.0914 15.625 60 15.625C37.9086 15.625 20 33.5336 20 55.625C20 77.7164 37.9086 95.625 60 95.625Z" fill="url(#paint0_linear_253_4933)" />
<path d="M60.5 95.625C82.3152 95.625 100 77.9402 100 56.125C100 34.3098 82.3152 16.625 60.5 16.625C38.6848 16.625 21 34.3098 21 56.125C21 77.9402 38.6848 95.625 60.5 95.625Z" stroke="white" stroke-opacity="0.6" />
</g>
<g opacity="0.4" filter="url(#filter1_d_253_4933)">
<path d="M60 84.625C76.0163 84.625 89 71.6413 89 55.625C89 39.6087 76.0163 26.625 60 26.625C43.9837 26.625 31 39.6087 31 55.625C31 71.6413 43.9837 84.625 60 84.625Z" fill="url(#paint1_linear_253_4933)" />
</g>
<g opacity="0.4" filter="url(#filter2_d_253_4933)">
<path d="M59.5 80.625C73.5833 80.625 85 69.2083 85 55.125C85 41.0417 73.5833 29.625 59.5 29.625C45.4167 29.625 34 41.0417 34 55.125C34 69.2083 45.4167 80.625 59.5 80.625Z" fill="url(#paint2_linear_253_4933)" />
</g>
<g opacity="0.4" filter="url(#filter3_d_253_4933)">
<path d="M59.5 76.625C71.3741 76.625 81 66.9991 81 55.125C81 43.2509 71.3741 33.625 59.5 33.625C47.6259 33.625 38 43.2509 38 55.125C38 66.9991 47.6259 76.625 59.5 76.625Z" fill="url(#paint3_linear_253_4933)" />
</g>
<g opacity="0.4" filter="url(#filter4_d_253_4933)">
<path d="M60.5 71.625C69.0604 71.625 76 64.6854 76 56.125C76 47.5646 69.0604 40.625 60.5 40.625C51.9396 40.625 45 47.5646 45 56.125C45 64.6854 51.9396 71.625 60.5 71.625Z" fill="url(#paint4_linear_253_4933)" />
</g>
<defs>
<filter id="filter0_bd_253_4933" x="-40" y="-44.375" width="200.5" height="200.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="30" />
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_253_4933" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset dy="5" />
<feGaussianBlur stdDeviation="10" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.768627 0 0 0 0 1 0 0 0 0.4 0" />
<feBlend mode="normal" in2="effect1_backgroundBlur_253_4933" result="effect2_dropShadow_253_4933" />
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_253_4933" result="shape" />
</filter>
<filter id="filter1_d_253_4933" x="21" y="16.625" width="78" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
</filter>
<filter id="filter2_d_253_4933" x="24" y="19.625" width="71" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
</filter>
<filter id="filter3_d_253_4933" x="28" y="23.625" width="63" height="63" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
</filter>
<filter id="filter4_d_253_4933" x="35" y="30.625" width="51" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.796078 0 0 0 0 0.388235 0 0 0 1 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_253_4933" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_253_4933" result="shape" />
</filter>
<linearGradient id="paint0_linear_253_4933" x1="60" y1="15.625" x2="60" y2="95.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint1_linear_253_4933" x1="60" y1="26.625" x2="60" y2="84.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint2_linear_253_4933" x1="59.5" y1="29.625" x2="59.5" y2="80.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint3_linear_253_4933" x1="59.5" y1="33.625" x2="59.5" y2="76.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
<linearGradient id="paint4_linear_253_4933" x1="60.5" y1="40.625" x2="60.5" y2="71.625" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6" />
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102" />
</linearGradient>
</defs>
</svg>
<!-- White (or no color) -->
<svg width="122" height="121" viewBox="0 0 122 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_bd_407_8802)">
<path d="M60.6546 95.375C82.7575 95.375 100.675 77.4664 100.675 55.375C100.675 33.2836 82.7575 15.375 60.6546 15.375C38.5517 15.375 20.6338 33.2836 20.6338 55.375C20.6338 77.4664 38.5517 95.375 60.6546 95.375Z" fill="url(#paint0_linear_407_8802)"/>
<path d="M61.1553 95.375C82.9819 95.375 100.676 77.6902 100.676 55.875C100.676 34.0598 82.9819 16.375 61.1553 16.375C39.3287 16.375 21.6348 34.0598 21.6348 55.875C21.6348 77.6902 39.3287 95.375 61.1553 95.375Z" stroke="white" stroke-opacity="0.6"/>
</g>
<g opacity="0.4">
<path d="M60.6548 84.375C76.6794 84.375 89.6699 71.3913 89.6699 55.375C89.6699 39.3587 76.6794 26.375 60.6548 26.375C44.6302 26.375 31.6396 39.3587 31.6396 55.375C31.6396 71.3913 44.6302 84.375 60.6548 84.375Z" fill="url(#paint1_linear_407_8802)"/>
</g>
<g opacity="0.4">
<path d="M60.1539 80.375C74.2445 80.375 85.6672 68.9583 85.6672 54.875C85.6672 40.7917 74.2445 29.375 60.1539 29.375C46.0633 29.375 34.6406 40.7917 34.6406 54.875C34.6406 68.9583 46.0633 80.375 60.1539 80.375Z" fill="url(#paint2_linear_407_8802)"/>
</g>
<g opacity="0.4">
<path d="M60.1548 76.375C72.0351 76.375 81.6659 66.7491 81.6659 54.875C81.6659 43.0009 72.0351 33.375 60.1548 33.375C48.2744 33.375 38.6436 43.0009 38.6436 54.875C38.6436 66.7491 48.2744 76.375 60.1548 76.375Z" fill="url(#paint3_linear_407_8802)"/>
</g>
<g opacity="0.4">
<path d="M61.1546 71.375C69.7194 71.375 76.6626 64.4354 76.6626 55.875C76.6626 47.3146 69.7194 40.375 61.1546 40.375C52.5897 40.375 45.6465 47.3146 45.6465 55.875C45.6465 64.4354 52.5897 71.375 61.1546 71.375Z" fill="url(#paint4_linear_407_8802)"/>
</g>
<defs>
<filter id="filter0_bd_407_8802" x="-39.3662" y="-44.625" width="200.542" height="200.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImageFix" stdDeviation="30"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_407_8802"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="5"/>
<feGaussianBlur stdDeviation="10"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.494118 0 0 0 0 0.768627 0 0 0 0 1 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="effect1_backgroundBlur_407_8802" result="effect2_dropShadow_407_8802"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_407_8802" result="shape"/>
</filter>
<linearGradient id="paint0_linear_407_8802" x1="60.6546" y1="15.375" x2="60.6546" y2="95.375" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6"/>
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
</linearGradient>
<linearGradient id="paint1_linear_407_8802" x1="60.6548" y1="26.375" x2="60.6548" y2="84.375" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6"/>
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
</linearGradient>
<linearGradient id="paint2_linear_407_8802" x1="60.1539" y1="29.375" x2="60.1539" y2="80.375" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6"/>
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
</linearGradient>
<linearGradient id="paint3_linear_407_8802" x1="60.1548" y1="33.375" x2="60.1548" y2="76.375" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6"/>
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
</linearGradient>
<linearGradient id="paint4_linear_407_8802" x1="61.1546" y1="40.375" x2="61.1546" y2="71.375" gradientUnits="userSpaceOnUse">
<stop stop-color="#EFEFEF" stop-opacity="0.6"/>
<stop offset="1" stop-color="#EFEFEF" stop-opacity="0.102"/>
</linearGradient>
</defs>
</svg>
#EFEFEF
явно к ним не относится, а другихhex
цветов я не вижу.