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

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

Ищешь классные

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

Что это такое

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Smashingmagazine

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

Behance

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

Fribly

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

Thenounproject

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

Flaticon

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

Iconmonstr

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

Pixeden

Бесплатные наборы иконок для любых проектов. Все они представлены в формате PNG от 16×16 до 512×512, подходящие для 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. Если рядом будет текст, расположите иконки слева, справа или сверху, но не под ним. 

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

Иконки | Mannodesign.com

Иконки

Новый год на носу! 🙂 Пора украшать все и вся красивыми рождественскими и новогодними картинками и иконками. Вэлкам! Сегодня я собрала для вас свежий мешок новогодних дизайнерских подарочков. Бесплатно! Это рождественские и новогодние иконки. Здесь есть и трендовые нынче плоские иконки, и мои любимые ретро картинки, а также снежинки в векторе, всевозможные бейджики и прочие […]

Свежая подборочка замечательных бесплатных иконок в формате SVG от Feather. В упаковке 240 стильных и современных иконок на самые различные темы. Если вы занимаетесь UX/UI проектированием или веб-дизайном, то эти иконки станут прекрасными помощниками. Скачать 240 иконок в формате SVG. Как внедрить эти иконки на своем сайте вы можете узнать здесь.

И снова приближается день Святого Валентина. Пора, пора готовить поздравительные открытки для своих любимых. Ну, или просто украсить свой сайт симпатичной иконкой 🙂 Я собрала для вас очередную свежую коллекцию бесплатных иконок ко дню Святого Валентина, которые вы можете использовать в своих дизайнах или просто послать кому-нибудь в виде открытки. Как самостоятельно сделать такую поздравительную […]

Представляю вам свежий набор симпатичных иконок от Icons8. Иконки идеально подходят для responsive приложений и веб-сайтов. Набор состоит из 150 иконок в четырех вариантах размеров (16, 30, 40 и 80px) с различными уровнями детализации (600 иконок в общей сложности). Мотивы включают в себя все, что так или иначе связано с офисом: оборудование и всякие технические […]

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

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) все прочнее занимает свое законное место в веб-дизайне, хотя появился этот формат уже в далеком 1999 году. Действительно, это очень удобно, когда картинки можно масштабировать без потери качества, а в нынешнюю эпоху повсеместного использования отзывчивого веб-дизайна (Responsive Web Design) это просто мастхэв, как говорится. Дизайнер […]

Стильные, бесплатные иконки социальных сетей темной расцветки в количестве 5 штук, меняющие свой цвет на исходный при наведении мышки. В наборе есть twitter, facebook, dribbble, google+ и иконка rss-фида. Это фотошоповский PSD-файл от Michael Reimer. За что ему большой сэнкас!

Несмотря на то, что бесплатных наборов иконок в интернетах уже стопицот тыщ мильёнов, однако с завидной периодичностью появляются все новые и новые. И это замечательно! 🙂 Сегодня я хочу представить вам парочку свежих находок. Спасибо smashingmagazine.com и sixrevisions.com!

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

Подборка сетов красивых иконок на день святого Валентина. Послужат прекрасным украшением для праздничного поздравления или даже может быть признания в любви 🙂 1. 10 St. Valentine’s Day Icon Set

бесплатных значков и изображений без лицензионных платежей для всех

значки для всего

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

Подборка и доступность

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

Поддержите Global Artists

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