Привет! О работе с svg:

1️⃣ если нужно, чтобы svg-элемент менял цвет, вставьте его на страницу с помощью тега <svg></svg>

2️⃣ всегда проверяйте viewBox после вставки svg. viewBox="0 0 24 24" - два последних числа - это ширина и высота, лучше чтобы это были целые значения(но большинство иконок квадратные и для них лучше равные значения)

3️⃣ для оптимизации svg в Figma скопируйте иконку в отдельное место, щелкните по ней правой кнопкой и выберите Outline stroke, это уберет обводки и если до этого вы видели атрибут stroke в коде svg, теперь будет применяться fill. Иногда это ухудшает иконку, можно нажать Ctrl+Z.

4️⃣ для того, чтобы в hover эффектах не менять fill, stroke и не использовать сложные селекторы, в коде svg, в атрибутах fill/stroke замените цвет на currentColor, теперь будет использоваться текущий цвет родителя(css color), в который svg вложен

🔗 Статья про viewBox, которая также может быть полезна

#верстка #svg