SVG иконки Flaticon снова бесплатные. Раскрываю секрет, как пользоваться Premium иконками

SVG иконки Flaticon снова бесплатные. Раскрываю секрет, как пользоваться Premium иконками

Есть способ, как обходить новый запрет на скачивание SVG иконок с сайта Flaticon. Пользуйтесь пока не прикрыли лавочку.

Сегодня я решил поделиться с Вами секретом, как добывать иконки в SVG формате.
И так! Как вы уже знаете, сервис flaticon.com сделал доступ к своим SVG иконкам только на базе премиум аккаунта.


SVG ikonki Flaticon snova besplatnyye 1 96506


Раньше сервис предоставлял возможность скачивать бесплатные варианты иконок в SVG формате. Теперь только по подписке.

 

Предлагаю два варианта решения проблемы!

Первый и самый простой - это приобрести премиум подписку.

Затраты на подписку включать в стоимость работ по сайту! За иконки должен платить Ваш клиент.


На моем канале есть ролик . В этом видео я более подробно рассказываю, как перевыставить стоимость премиум подписки вашему клиенту. Даю советы, на каких бесплатных сервисах искать SVG. И еще расскажу про плагин для Figma, который преобразует PNG иконки в векторный формат (SVG).


Второй вариант решения проблемы с иконками сейчас рассмотрим более подробно.

 

Видео инструкция, если лень читать )

{ytvideo https://youtu.be/rRZ0hYo2mu4|16-9}

 

Как скачать SVG иконки бесплатно?

Открываем сайт flaticon.com Регистрируемся или авторизуемся на сайте. После авторизации приступаем к поиску нужных нам иконок. Подобрали иконки. Перешли к редактированию.


Открываем редактор иконки. В правой панели меню видно, что скачать в формате SVG можно только на премиум аккаунте. Бесплатное скачивание возможно только в формате png.


Открываем “Edit icon”.


SVG ikonki Flaticon snova besplatnyye 2 d995a


В редакторе “Edit icon” при необходимости меняем цветовую палитру.

 

SVG ikonki Flaticon snova besplatnyye 3 97884

 

Дальше надо навести курсор мыши на иконку. Правая клавиша мышки: посмотреть код.

 

SVG ikonki Flaticon snova besplatnyye 4 2bafb

 

Откроется панель разработчика (инспектор кода).

 

SVG ikonki Flaticon snova besplatnyye 5 377a1

 

Второй способ открыть панель разработчика - нажать на клавишу F12. В панели выбираем “Выбрать курсор для проверки” или нажать горячие клавиши Ctrl+Shift+C.

 

SVG ikonki Flaticon snova besplatnyye 6 7d133

 

Я работаю в браузере “Google chrome”. В любом другом браузере есть те же самые инструменты. Они примерно везде одинаковые.

 

Теперь надо навести курсор мыши на иконку. Иконка, подсветиться квадратиком. Кликнуть левой кнопкой мыши по выделенной области иконки. Нас перебросит к нужной строке кода.
Строка кода будет начинаться так: svg xmlns.

 

SVG_ikonki_Flaticon_snova_besplatnyye_7_7836d_77e06.jpg

 

Навели мышкой на подсвеченную строку кода правая клавиша мыши - редактировать как html. Теперь надо скопировать все содержимое, начиная от <svg xmlns=" и заканчивая закрывающим тегом </svg>.

 

SVG ikonki Flaticon snova besplatnyye 8 3b055

 

SVG_ikonki_Flaticon_snova_besplatnyye_9_16fdb_b5fa3.jpg

 

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

И сейчас мы скопировали весь набор координат. Теперь скопированное содержимое надо вставить в блокнот.

 

  SVG_ikonki_Flaticon_snova_besplatnyye_10_28948_0c754.jpg

 

 Использовать можно любой блокнот. Я пользуюсь текстовым редактором Notepad++.


Сохранить как - ваше название картинки. svg.


! Внимание сохранять обязательно в формате. svg


Иконка готова. Теперь вы можете ее использовать на сайте или отредактировать в графический редакторе Figma, Adobe Illustrator.


Вот такое решение проблемы. Это, конечно, не так, как было раньше. Но используя сервис flaticon.com , вы быстро сможете подобрать набор иконок в одной стилистике. Толщина линии будет во всех иконках одинаковая с определенными стилистическими элементами.


Допустим, мне нужен дизайн с иконками часы. В поисковую строку сервиса пишу - clock. Но мне нужно минимум три иконки в одном стиле. В выпадающем меню нажимаю “Group by pack”. Произойдет сортировка паками с обязательным элементом “часы”. Останется только выбрать.

 

SVG ikonki Flaticon snova besplatnyye 11 ad372

 

  SVG ikonki Flaticon snova besplatnyye 12 a1355


Поверьте, это будет гораздо быстрее, чем искать в других сервисах похожие изображения, чтобы это выглядело как единый пак иконок.


Пользуйтесь, пока есть возможность. Однако рекомендую приобретать премиум подписку.