Расскажу, как быстро поменять цвет векторной иконки. Кроме того, что векторные иконки хорошо выглядят в любом размере, менять их цвет тоже значительно проще, чем перекрашивать растровую иконку в фотошопе.
Растровая или векторная?
Рекомендую использовать векторные иконки, так как они выглядят хорошо в любом размере (суть формата заключается в том, что изображение формируется из опорных точек и линий между ними, изображения можно увеличить, а качество остается прежним).
Сравните. Справа векторная иконка на увеличении, края у нее ровные. Слева увеличена растровая иконка, при увеличении появляются пиксели и рваные края, а на краях цвет писклей неравномерный, какие-то темные, какие-то светлые.
Из-за рваных краев и оттенков цвета по краю, будет сложно аккуратно поменять цвет растровой иконки. В зависимости от ваших навыков, может получится хорошо, а может и очень ужасно. С векторной иконкой проще, мы просто задаем цвет линий.
Где взять векторные иконки (да и растровые)
В интернете много поисковиков по иконкам, где их можно скачать, как в растре, так и векторе.
Например, есть сайт https://www.iconfinder.com/ . Там большой выбор и удобная система поиска. Ставьте в фильтрах «бесплатные» и «не требуют обратной ссылки», если не хотите указывать авторство.
Как поменять цвет векторной иконки
Переходим в онлайн-редактор векторной графики https://vectr.com/. Если вдруг он не доступен, то попробуйте другие бесплатные графические онлайн-редакторы, там есть аналоги, которыми я тоже пользуюсь.
Загружаем иконку, кликаем на элементы иконки и в настройках задаем нужный цвет.
При сохранении оставляем векторный формат SVG.
Как поменять цвет растровой иконки
Для замены цвета в растровой иконке идем в онлайн аналог фотошопа https://www.photopea.com/ и открываем изображение в нем.
Используя инструмент выделения «Цветовой диапазон», выделяем все элементы иконки.
Далее, с помощью инструмента «Заливка» нам нужно залить выделение выбранным цветом.
Результат:
Ресурсы для поиска иконок
Напоследок, несколько популярных ресурсов для поиска иконок:
- https://www.flaticon.com/
- https://icons8.com/
- https://www.iconfinder.com/
- https://findicons.com/
Не забывайте, что многие бесплатные изображения, в том числе иконки, требуют указания авторства.
