Сайт иконок: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

12.04.2023 alexxlab

Содержание

Использование наборов бесплатных иконок на сайте

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

Большинство наборов содержат разбивку по категориям. Вы можете найти логотипы социальных сетей, платежных систем, CMS и именитых мировых компаний, например таких как: Apple, Android, Windows и множество других.

Библиотеки содержат иконки в различных форматах, что позволяет более тонко подойти к Вашим нуждам:

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

Вы можете сами выбрать какой формат использовать. Например SVG-формат. Некоторые коллекции уже встроены в такие фреймворки как Bootstrap, Foundation и другие.

Чтобы использовать иконки на сайте необходимо их подключить. Это делается двумя способами и они почти всегда одинаковые, для наборов различных разработчиков:

Вы скачиваете с сайта разработчика архив, содержащий необходимые материалы, и подключаете скачанные файлы, в одном из документов сайта, с помощью html, например:
<link rel=»stylesheet» href=»/css/mfglabs_iconset.css»>

Первый способ хорош тем, что, при необходимости Вы, можете сделать в коде необходимые исправления связанные со стилизацией иконок, добавить свои CSS правила, сохранить документ и исходный код будет всегда под рукой.
Вы используете тот же архив, но не скачиваете его, а просто подключаете таким же способом, как в первом случае. При этом файлы находятся на удаленном сервере и не занимают места, например:
<link rel=»stylesheet» href=»//maxcdn. bootstrapcdn.com/elusive-icons/2.0.0/css/elusive-icons.min.css»>

Этот способ имеет свои преимущества. Для хранения и передачи файлов обычно используются CDN ( Content Delivery Network – сеть доставки контента) и даёт такие преимущества как:

снижение нагрузки на сервер → увеличение скорости загрузки страниц → увеличение и улучшение позиций сайта в поисковых системах;
определенная защита к DDoS атакам;
кэширование на удаленных серверах и выбор ближайшего к вам сервера, для передачи данных. Благодаря этому необходимые файлы быстро загружаются на Ваш сайт.

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

Для каждого набора существуют свои правила вывода необходимого материала на страницу. Мы рассмотрим на практике два основных способа использования:

1. Для Font Awesome необходимо вставить в нужном месте следующий код и получите результат:

Увеличение размера производиться с помощью добавления следующих классов: fa-2x, fa-3x, fa-4x и далее, по аналогии. В других подборках правила увеличения похожи, за исключением первых букв класса, которые обычно соответствуют аббревиатуре названия библиотеки иконок.

Так же в инструментарии Font Awesome присутствуют такие возможности как:

анимированые иконки;
рамка вокруг;
применение к спискам;
поворот;
наложение;
настраивыемый CSS.

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

2. Для OPENICONIC существуют сразу три основных способа и два способа для использования в фреймворках. Рассмотрим только 3 основных:

подключение в виде обычного изображения:
<img src=»/open-iconic/svg/account-login.svg»>
подключение в виде SVG-спрайта:
<svg viewBox=»0 0 8 8″><use xlink:href=»#account-login»></use></svg>
использование обычного inine-элемента с CSS-классом:
<span data-glyph=»account-login»></span>

Бесплатные библиотеки иконок для сайта

На большинстве сайтов можно произвести поиск по набору, используя английские названия необходимых вам иконок (например: search или loop – иконка лупы, используемая для поиска на Вашем сайте).

Так же присутствуют примеры и документация для лучшего понимания устройства и использования.

Все представленные ниже подборки являются бесплатными, имеют открытую лицензию и позволяют использовать их в коммерческих или любых других целях:

Font Awesome (fontawesome.io) — один из самых популярных и всеобъемлющих наборов — 675 шт.

Foundation Icon Fonts 3 (zurb.com/playground/foundation-icon-fonts-3) — набор относящийся к Front-end фрэймворку Foundation — 283 шт.
Elusive Icons (elusiveicons.com) — 304 шт.
MFG Labs Icon set (hmfglabs.github.io/mfglabs-iconset/) — 260 шт.
OPENICONIC (useiconic.com/open) — 223 шт.
GLYPH (glyph.smarticons.co) — используется в Front-end фреймворке Bootstrap — 800 шт.
IKONS (ikons.piotrkwiatkowski.co.uk) — 300 шт.
Dripicons (demo.amitjakhu.com/dripicons) – 500 шт.
Ionicons (ionicons.com) — 617 шт.
Material icons (material. io/icons) — 900 шт.
Entypo+ (entypo.com) — 411 шт.
Icons8 (icons8.com) — 62,300 шт.
Freepic (ru.freepik.com/free-icons) — 99,458 шт.
Flaticon (flaticon.com) — 632,500 шт.
IcoMoon (icomoon.io) — 550 шт.

Список составлен без какого-либо отношения к популярности или практичности библиотеки. Нет какого-либо разграничения и каждый найдёт свои прекрасные иконки, подходящие для реализации его цели.

Как работать с модулем «Список из иконок»

С помощью модуля «Список из иконок» можно создать список услуг, качеств, видов товара или услуги. Для примера настройки этого модуля мы создадим такой список возможностей оплаты товара:

Как добавить модуль на страницу

1.
Войдите в режим редактирования сайта.
2.
Выберите строку, в которую хотите добавить модуль.
3.
Нажмите на серый плюс.
4.
Выберите нужный модуль:

Готово, теперь можете переходить к настройкам внешнего вида текста.

Настройки каждого модуля находятся в трёх вкладках: «Контент», «Дизайн», «Дополнительно».

Контент

Во вкладке «Контент» нажмите на знак плюса:

Вы перейдёте в режим настройки иконки. Здесь тоже есть три вкладки для настройки внешнего вида иконки «Контент», «Дизайн» и «Дополнительно».

Обратите внимание! Если вы хотите указать одинаковые настройки текста и иконок (например, цвет, шрифт, размер), удобнее это делать в общих настройках модуля во вкладке «Дизайн».

Во вкладке «Контент» в блоке «Контент» настройте текст и картинку для элемента списка.

Чтобы выбрать иконку из предложенного списка, в параметре Использовать иконку переведите переключатель в положение ДА и выберите иконку:

Если вам не подходят предложенные иконки, можно загрузить своё изображение. Для этого в параметре «Использовать иконку» переведите переключатель в положение НЕТ и нажмите на знак плюса. Загрузите изображение:

В блоке «Подсказка» можно настроить всплывающую подсказку. Для этого в параметре Использовать всплывающую подсказку переведите переключатель в положение ДА и введите текст, который должен отображаться в подсказке:

Ниже в блоке «Фон» можно установить однотонный или градиентный фон для элемента списка.

Во вкладке «Дизайн» в блоке «Иконка» настраивается:

закругление краёв иконки,
рамка,
тень.

В блоке «Изображение» настраивается:

цвет фона иконки,
отступ слева от изображения,
размер иконки,
закругление фона иконки,
рамка.

В блоке «Подсказка» настраивается:

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

В блоке «Текст» настраивается шрифт, цвет, размер, межбуквенный интервал текста рядом с иконкой.

Во вкладке «Дополнительно» настраивается CSS и HTML-код для элемента.

Для продолжения настройки модуля выйдите из меню настроек элемента списка. Для этого в верхней части поля настроек нажмите на стрелку:

Добавьте и настройте остальные элементы списка.

Обратите внимание! Если вы указали индивидуальные настройки для каждого текста и иконки, в этой вкладке в блоках «Текст», «Иконка», «Изображение», «Подсказка» ничего устанавливать не нужно.

В блоке «Текст» можно настроить расстояние между иконкой и текстом, шрифт, цвет, размер, межбуквенный интервал, тень всего текста списка.

В блоке «Иконка» настраивается закругление краёв фона, рамка, тень всех иконок.

В блоке «Изображение» настраивается цвет фона, отступ слева, размер, закругление фона, рамка для всех изображений.

В блоке «Список элементов» настраивается:

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

С помощью блоков «Размеры» и «Отступы» настройте размер всего модуля и его положение на странице.

В блоке «Фильтр» можно изменить контрастность, насыщенность, яркость, прозрачность изображений.

В блоке «Анимация» настройте параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

Дополнительно

Эта вкладка предназначена для опытных пользователей, которые умеют работать с CSS и HTML. Также здесь можно настроить видимость элемента на разных устройствах, например, модуль будет отображаться только на компьютерной версии сайта. Как посмотреть внешний вид сайт на разных устройствах, описано в статье.

Помогла ли вам статья?

Да

раз уже
помогла

Приложения и плагины с перетаскиванием значков

Миллионы иконок прямо в вашем ПО

Перетаскивайте значки прямо в используемое программное обеспечение, включая Photoshop, Illustrator, Sketch, Google Docs, PowerPoint и многие другие более. Доступ к векторным значкам, форматам PNG и PDF, не выходя из приложения ваш рабочий процесс.

Noun Project для Mac

Перетащите значки из приложения практически в любой интерфейс Mac: Sketch, Creative Cloud, Google, Office и многое другое.

Подробнее

Надстройки Adobe

Ищите, захватывайте и изменяйте значки, не выходя из Adobe Illustrator, Photoshop или InDesign (ПК или Mac).

Подробнее

Дополнения Google

Дайте Google Slides и Google Docs быстрый и легкий визуальный эффект с перетаскиванием векторных значков.

Подробнее

Надстройки Майкрософт

Получайте и настраивайте значки из Microsoft PowerPoint и Слово, не нужно загружать раньше времени.

Подробнее

Сравните бесплатную версию и версию NounPro

Бесплатная версия включает в себя неограниченное использование 100 лучших иконок. Доступ Premium и разблокируйте еще 5 миллионов значков без лицензионных отчислений, просто наличие подписки NounPro.

Бесплатные функции

Возможности NounPro

100 значков

Неограниченное количество значков

Возможности NounPro

Неограниченное количество иконок
Изменить размер и Цвет
Неограниченные загрузки на NounProject. com

Бесплатные функции

100 иконок
Изменить размер и цвет
Неограниченные загрузки на NounProject.com

Более 35 996 высококачественных иллюстраций — Iconfinder

Основной

1 208 иллюстраций

ПОП

300 иллюстраций

Черно-белая деятельность

664 иллюстрации

Очередь людей

396 иллюстраций

Вторник

97 иллюстраций

Зоополосы

150 иллюстраций

Блок

100 иллюстраций

Истории

91 иллюстрация

Кальма

200 иллюстраций

Гуманный

573 иллюстрации

Центр города

200 иллюстраций

Бейкер

116 иллюстраций

Получите 10 кредитов за премиум-контент

Подпишитесь на бесплатную пробную версию Iconfinder Pro. Получите доступ ко всем высококачественным значкам и иллюстрациям, пригласите членов своей команды и получите первые 10 кредитов от нас.

Подробнее о Pro Начните 7-дневную бесплатную пробную версию

Затем 9 долларов в месяц. Отменить в любое время.

Жевательная резинка

85 иллюстраций

Корень

24 иллюстрации

Лотте

112 иллюстраций

Призрак

165 иллюстраций

Градиент

125 иллюстраций

Зима

127 иллюстраций

Мелок

50 иллюстраций

Свободная линия

34 иллюстрации

Блюз

60 иллюстраций

Робин

21 иллюстрация

Ингредиенты хорошей жизни

15 иллюстраций

Игровой набор

96 иллюстраций

Фиолетовый

54 иллюстрации

Заводной

50 иллюстраций

Клементина

78 иллюстраций

Обнаженная

68 иллюстраций

Шашки

120 иллюстраций

Конфеты

69 иллюстраций

Лимон

66 иллюстраций

Жирный

50 иллюстраций

Чирио

60 иллюстраций

Хрома

70 иллюстраций

Художественный

40 иллюстраций

Современный

35 иллюстраций

Получите 10 кредитов за премиум-контент

Подпишитесь на бесплатную пробную версию Iconfinder Pro. Получите доступ ко всем высококачественным значкам и иллюстрациям, пригласите членов своей команды и получите первые 10 кредитов от нас.

Подробнее о Pro Начните 7-дневную бесплатную пробную версию

Затем 9 долларов в месяц. Отменить в любое время.

Человек

116 иллюстраций

Цветные капли

155 иллюстраций

Немо

107 иллюстраций

Пурпурный

139 иллюстраций

Симлайн

40 иллюстраций

Свечение

52 иллюстрации

Горчица

50 иллюстраций

Транзакция

41 иллюстрация

Стэнли

20 иллюстраций

Повседневная деятельность

1 149 иллюстраций

Пастель

39 иллюстраций

Лютер

14 иллюстраций

Пустой

21 иллюстрация

Миксология

30 иллюстраций

Скрэнтон

36 иллюстраций

Винтаж

31 иллюстрация

Сцены из жизни

126 иллюстраций

Лила

124 иллюстрации

Участок

21 иллюстрация

Такси

31 иллюстрация

Бахрома

19 иллюстраций

Юмор

50 иллюстраций

Берегите себя

9 иллюстраций

Небо

48 иллюстраций

Вечный

30 иллюстраций

Кубизм

36 иллюстраций

Сцепка

18 иллюстраций

Домашний

10 иллюстраций

Симлайн

20 иллюстраций

Ч/б

30 иллюстраций

Ссылки

22 иллюстрации

Мила

72 иллюстрации

Колти

30 иллюстраций