Где брать иконки для сайта: самый полный обзор вариантов

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

Что это такое

Иконка выполняет на сайте роль своего рода указателя. Это до предела упрощенное изображение какого-либо действия, предмета или понятия. Весь смысл в том, чтобы с первого взгляда любой юзер понял, о чем речь. Изображение небольшой телефонной трубки или логотип мессенджера у вас на смартфоне - все это иконки. 

Они минимизируют время, нужное для восприятия информации. С помощью правильно подобранных иконок можно ускорить навигацию по сайту, расставить акценты, визуально разграничить разделы. Ими разбивают текстовые блоки на лендингах, чтобы посетителю было легче “пробираться” сквозь поток информации.

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

Сценарии использования иконок

Что еще так ярко отражает современные тренды в веб-дизайне, как не иконки? Лаконичность, минимализм, аккуратность, простота линий, чистые цвета. Не удивительно, что огромное количество ресурсов оформлены именно с помощью иконок. 

Их применяют:

• вместо текста - чтобы сэкономить место на странице и время юзера;
• вместе с текстом - чтобы зацепить внимание читателя, расставить “маячки” в нужных местах;
• для экономии места вместо описаний разделов - актуально для мобильной версии сайта, в приложениях.

Иконки улучшают восприятие - это факт. Если запускаете новый проект (будь то сервис, магазин, приложение), выбор в пользу максимально узнаваемых символов поможет пользователю быстрее разобраться с интерфейсом, сориентироваться и привыкнуть. 

Где использовать

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

Иконки уместны в таких случаях:

Для оформления меню

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

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

Для указания возможного действия

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

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

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

Для расстановки акцентов

Отличный прием для лендингов или главных страниц. Оформление блоков текста при помощи иконок - решение проблемы быстрого скроллинга или же “блуждающего взгляда”. Человек, привыкший просматривать страницу лишь бегло, “по диагонали”, найдет где остановить свой взгляд, быстрее сориентируется в тексте и внимательнее прочтет те блоки, которые вызывают отклик и интерес. 

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

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

ТОП-18 бесплатных ресурсов

Для начала рассказываем, где взять иконки бесплатно. Мы отобрали проверенные источники, работать с которыми просто и надежно.

Smashingmagazine

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

Behance

Тут найдутся готовые наборы - классические, оригинальные, цветные, черно-белые, крупные и мелкие бесплатные иконки для сайта. Важно: для того, чтобы найти стеки (готовые наборы) на ресурсе, нужно ввести в строку поиска запрос free icons

Fribly

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

Thenounproject

Один из наиболее популярных среди дизайнеров бесплатных сервисов. Использовать можно в обмен на указание автора. Отличительная черта - удобный поиск. Скачать можно довольно быстро, а выбор один из самых широких среди подобных ресурсов.

Flaticon

По праву называется крупнейшей базой бесплатных иконок в векторе. Коллекция насчитывает более 3,7 миллионов картинок в PNG, PSD, SVG и других форматах, сформированных в тематические наборы. 

Iconmonstr

Далеко не самая большая, но очень стильная и выдержанная в единой концепции концепции коллекция бесплатных иконок. Тут чуть более 300 подборок, всего около 5 тысяч вариантов иконок, все черно-белые, стильные и лаконичные.

Pixeden

Бесплатные наборы иконок для любых проектов. Все они представлены в формате PNG от 16x16 до 512x512, подходящие для Adobe Photoshop, в векторе.

Dreamstale

Здесь не только бесплатные иконки для сайтов, но и множество других полезных для дизайнера “фишек” - шрифты, стоковые изображения, текстуры и пр.

Pixelsmarket

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

Icojam

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

Graphicsfuel

Большое разнообразие коллекций, в основном цветные иконки. Стеки разделены тематически.

Dryicons

Простой в использовании сайт с небольшой, но стильной коллекцией бесплатных иконок. Разделены на наборы, но есть и отдельные изображения. В основном представлены черно-белые варианты.

Goodstuffnononsense

Сайт выделяется среди собратьев особым стилем - значки будто нарисованы от руки. Качество очень хорошее, а пользоваться можно совершенно бесплатно, не нужно даже давать ссылку на источник. 

Iconshok

Библиотека сервиса включает более 2 миллионов значков, оформленных в 400+ наборов. Можно найти изображения в разном стиле - цветные и черно-беллые, графичные, минималистичные и более объемные, необычные. 

Endlessicons

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

Dribble

Тут собраны дизайнерские варианты значков. Стоит поискать что-то интересное, если нужно небанальное решение. В библиотеке ресурса более 10 тысяч разнообразных иконок. Скачать можно после авторизации. 

Streamlineicons

Коллекция из более чем 30 тысяч бесплатных иконок для сайтов в векторе. Делятся на стеки по предназначению - для интерфейса, социальных сетей и пр.

Важно: об авторских правах

Использовать бесплатно в личных и коммерческих целях можно те изображения, которые авторы добровольно открыли для свободного скачивания, т.е. с лицензией Creative Commons.

Однако важно не забывать, что если иконки нужны для коммерческого использования (ресурс прямо или косвенно получает прибыль), нужно правильно подписывать скачанные материалы.

Делается это по схеме “Автор/Источник/Лицензия CC”. Иногда это не требуется. Как правило, каждый ресурс имеет раздел с подробным объяснением этого момента.

Все не то? Как заказать у иллюстратора

Если иконки скачать не получилось, нужная не находится даже среди тысяч вариантов, рассмотрите более дорогостоящий, но быстрый способ - заказать нужное изображение у профессионала. Это избавит от временных затрат и повысит шанс получить именно то, что требуется. 

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

Стоимость может быть очень разной и зависит от большого количества факторов - насколько опытным будет исполнитель, что требуется (плоское изображение, объем, контур, перспектива и т.д.), будет ли это простой символ в духе “позвонить” или идеограмма, которая передает суть понятия. Объяснить слово “независимость” - дольше и сложнее, чем создать пиктограмму для “заказать”.

Еще один момент - объем заказа. За один значок заплатить придется больше, чем за штуку в “оптовом заказе”. 

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

Популярные ресурсы - Weblancer, Freelance, Dribble, Behance.

Платные сервисы: разумный компромисс

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

IconSetc

Работает по подписке, подходящий вариант для специалистов, которые постоянно выполняют заказы. Стоимость PRO-аккаунта стартует от $3. 

PixelLove

В базе более 15 тысяч вариантов, для упрощения поиска они разделены на 6 стилей. 

Pixeden

Тут удобный поиск и подписной формат. Часть материала доступна для бесплатного скачивания, все остальное - только для подписчиков. Месяц стоит $10, год $96.

Как выбрать подходящие иконки

В первую очередь обратите внимание на формат. Если ваша цель - скачать иконку, а после загрузить ее на сайт, вам подойдет PNG, ICO, SVG. Последний - это вектор, наиболее распространенный и удобный вариант. Главный плюс - возможность масштабирования без потери качества.

Если планируете кастомизировать иконку, то есть подредактировать ее “под себя” в графическом редакторе, выбирайте PSD или AI. Такие можно изменить - добавить цвет, объем и прочее. 

Важно учитывать:

1. Не стоит гнаться за уникальностью в поиске решения простых задач. Если оформляете меню, отдайте предпочтение узнаваемым и понятным символам. Пытаясь выбрать иконки, которых нет ни у кого другого, можно в итоге запутать юзера и нанести ущерб всему проекту. 
2. Придерживайтесь единого стиля - объемные, плоские или контурные. Иконки, подобранные “вразнобой”, создадут впечатление небрежности и дешевизны Лучше всего выбрать стек от одного дизайнера. Учитывайте и то, как значки будут гармонировать с ресурсом в целом. Следите, чтобы у всех была одинаковая подложка, размер, цветовая гамма. 
3. Если рядом будет текст, расположите иконки слева, справа или сверху, но не под ним. 

Следите за гармоничным сочетанием шрифтов, цвета текста, иллюстраций.