Как пользоваться Linearicons: скачать SVG-иконки и изменить их цвет

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

Официальная страница бесплатной коллекции:

https://linearicons.com/free

1. Как найти нужную иконку

Откройте страницу бесплатной коллекции Linearicons и выберите нужную иконку. Например, если нужна иконка ссылки, можно открыть отдельную страницу иконки:

Иконка Link в Linearicons

На странице иконки обычно доступна кнопка Download SVG. Нажмите её, чтобы скачать иконку отдельным SVG-файлом.

2. Почему лучше скачивать SVG

SVG — это векторный формат. Такая иконка не теряет качество при увеличении или уменьшении. Её можно использовать и маленькой, и крупной, сохраняя чёткие линии.

Кроме того, SVG удобно редактировать: можно менять цвет, размер и поведение иконки через CSS или настройки конструктора сайта.

3. Как скачать SVG-иконку

Алгоритм простой:

1. Откройте бесплатную коллекцию Linearicons.
2. Выберите нужную иконку.
3. Откройте её отдельную страницу.
4. Нажмите Download SVG.
5. Сохраните файл на компьютер.

Например, для иконки ссылки используется страница:

https://linearicons.com/free/icon/link

4. Как изменить цвет SVG-иконки

Цвет SVG можно менять несколькими способами. Самый простой вариант — через Elementor, если иконка загружена как SVG и виджет поддерживает изменение цвета.

Но иногда цвет прописан прямо внутри SVG-файла. Тогда его нужно изменить вручную.

Вариант 1. Изменить цвет через Elementor

1. Загрузите SVG-файл в WordPress или Elementor.
2. Добавьте иконку на страницу.
3. Откройте вкладку Стиль.
4. Найдите настройку Цвет или Icon Color.
5. Выберите нужный цвет.

Если цвет не меняется, скорее всего, он жёстко прописан внутри SVG-файла.

Вариант 2. Изменить цвет в коде SVG

SVG-файл можно открыть обычным текстовым редактором. Внутри может быть строка такого вида:

<path fill="#000000" d="...">

Значение #000000 означает чёрный цвет. Его можно заменить на любой другой HEX-код. Например:

<path fill="#C45A84" d="...">

Если иконка контурная, цвет может задаваться не через fill, а через stroke:

<path stroke="#000000" d="...">

Тогда заменить нужно именно stroke:

<path stroke="#C45A84" d="...">

5. Универсальный способ: currentColor

Для сайта часто удобнее не задавать конкретный цвет внутри SVG, а использовать значение currentColor.

Например:

<path fill="currentColor" d="...">

Или для контурной иконки:

<path stroke="currentColor" d="...">

Тогда иконка будет наследовать цвет от CSS. Например:

.my-icon {
  color: #C45A84;
}

Это удобно, если одна и та же иконка используется в разных местах сайта и должна менять цвет в зависимости от блока, кнопки или темы оформления.

6. Пример: скачиваем и перекрашиваем иконку Link

Допустим, нужна иконка ссылки для кнопки или блока контактов.

1. Откройте страницу иконки: https://linearicons.com/free/icon/link
2. Нажмите Download SVG.
3. Откройте скачанный SVG-файл в текстовом редакторе.
4. Найдите параметр fill или stroke.
5. Замените старый цвет на нужный.
6. Сохраните файл.
7. Загрузите SVG в WordPress или Elementor.

Например, было:

fill="#000000"

Стало:

fill="#C45A84"

Или универсальный вариант:

fill="currentColor"

7. Важное замечание о лицензии

Бесплатная версия Linearicons распространяется по лицензии CC BY-SA 4.0. Это означает, что при использовании бесплатных иконок может требоваться атрибуция — ссылка на Linearicons и автора.

Перед использованием на коммерческом сайте стоит проверить условия лицензии на официальной странице:

https://linearicons.com/free

Кратко

Чтобы использовать иконку Linearicons на сайте, нужно открыть бесплатную коллекцию, выбрать иконку, скачать её в формате SVG, при необходимости изменить fill или stroke, а затем загрузить файл в WordPress или Elementor.