Где скачать иконки для сайта?
Лучшие бесплатные источники
и рекомендации по использованию
и рекомендации по использованию
Статья для маркетологов, предпринимателей, редакторов и всех, кто работает с сайтами. Разбираемся, где взять иконки бесплатно, не нарушая авторские права, как иконки помогут повысить продажи и как использовать иконки на странице, чтобы люди читали ваши тексты.
Что такое иконка
Иконка — это максимально упрощенное изображение объекта или действия.
Они выражают объекты или действия проще, чем слово, что ускоряет процесс восприятия информации. Используются для обозначения разделов сайта, кнопок интерфейса и для того, чтобы сделать акцент. Иконки должны быть запоминающимися, понятными и легко считываемыми. Иконка может состоять из одного или нескольких объектов, которые составляют гармоничную композицию.
Помимо этого, у иконок есть еще одно неоспоримое преимущество перед алфавитом — отсутствие языкового барьера. Иллюстрации понимают все, поэтому значки используют в операционных системах, в интерфейсах, на сайтах, в презентациях и даже в рекламе.
Помимо этого, у иконок есть еще одно неоспоримое преимущество перед алфавитом — отсутствие языкового барьера. Иллюстрации понимают все, поэтому значки используют в операционных системах, в интерфейсах, на сайтах, в презентациях и даже в рекламе.
“
Иконки используют по разным сценариям, в зависимости от задачи.
Вместо текста, когда для букв мало места или нет вовсе; когда вы знаете, что пользователь не будет читать текст и в случаях, когда надо выиграть время.
Для экономии места на экранах с низким разрешением, зачастую, в приложениях. Тут важно использовать недвусмысленные и понятные иконки, которые правильно передают идею.
Как маяки в тексте. Даже хорошо структурированный текст, с небольшими абзацами и подзаголовками, выиграет от добавления тематических иконок в ключевых местах. Взгляд читателя обязательно зацепится за иллюстрацию и за текст, который она сопровождает.
Для лучшего восприятия. Здесь действует эффект превосходства образа: изображения мы запоминаем лучше, чем текст. Этот прием используют, чтобы быстрее обучить пользователя или вызвать ассоциации. Например, если вы запустите новое приложение и используете универсальные, привычные пользователю значки, он быстрее разберется с функциональностью.
Вместо текста, когда для букв мало места или нет вовсе; когда вы знаете, что пользователь не будет читать текст и в случаях, когда надо выиграть время.
Для экономии места на экранах с низким разрешением, зачастую, в приложениях. Тут важно использовать недвусмысленные и понятные иконки, которые правильно передают идею.
Как маяки в тексте. Даже хорошо структурированный текст, с небольшими абзацами и подзаголовками, выиграет от добавления тематических иконок в ключевых местах. Взгляд читателя обязательно зацепится за иллюстрацию и за текст, который она сопровождает.
Для лучшего восприятия. Здесь действует эффект превосходства образа: изображения мы запоминаем лучше, чем текст. Этот прием используют, чтобы быстрее обучить пользователя или вызвать ассоциации. Например, если вы запустите новое приложение и используете универсальные, привычные пользователю значки, он быстрее разберется с функциональностью.
Иконки идеально вписываются в современные тренды веб-дизайна: простота и минимализм. Поэтому в сети сейчас очень много ресурсов, где можно найти иконки. Их можно скачать бесплатно на сервисах-стоках, купить готовый понравившийся стек (набор) или отдельные иконки, или заказать у дизайнера разработку уникальных значков. Мы отобрали лучшие источники.
Где взять иконки для сайта?
Мы разделили источники на бесплатные и платные, а также написали ресурсы, где можно заказать их у дизайнеров.
Прямо в Тильде
В интерфейсе Тильды есть удобная панель для поиска иконок с возможностью изменять их вид.
Откройте меню «Контент» блока и нажмите на кнопку «Выбрать иконку». Вы можете искать иконки по категориям, через поиск или найти подходящую, проскроллив библиотеку. После выбора иконки откроется редактор, где можно настроить цвет, размер, толщину, цвет фона и скругление изображения.
Откройте меню «Контент» блока и нажмите на кнопку «Выбрать иконку». Вы можете искать иконки по категориям, через поиск или найти подходящую, проскроллив библиотеку. После выбора иконки откроется редактор, где можно настроить цвет, размер, толщину, цвет фона и скругление изображения.
Бесплатные иконки: 21 лучший сайт
01. Tilda Icons
02. Thenounproject
Пожалуй, первое, что приходит в голову, когда речь идет об иконках. Большая коллекция, очень удобный поиск и быстрое скачивание. Можно использовать бесплатно в обмен на указание автора.
03. Smashingmagazine
Коллекции бесплатных иконок, отобранные редакцией Smashing Magazine. Один из лучших ресурсов для поиска иконок высокого качества.
04. Flaticon
Возможно, самая большая коллекция — свыше 220 000 иконок, сгруппированных в 3 600 наборов.
05. Behance
Не самый очевидный способ, но по запросу free icons можно найти готовые наборы с красивыми иконками.
06. Iconmonstr
Стильные черно-белые иконки. Не самая большая коллекция, но что хорошо — иконки в одном стиле.
07. Pixeden
Наборы иконок в png разного размера от 16px до 512px.
08. Pixelsmarket
Сайт-агрегатор, который собирает ссылки на менее известные сайты, где можно найти бесплатные иконки хорошего качества.
09. Graphicsfuel
Много коллекций разноцветных иконок со всего интернета.
10. Fribly
Иконки от разных дизайнеров, регулярно обновляется.
11. Icojam
Небольшая команда дизайнеров, которая рисует иконки на продажу (и делает это очень неплохо), но часть раздает бесплатно.
12. Iconshok
Огромный архив с двумя миллионами иконок, сгруппированных в 400 наборов. Правда, бесплатно скачать иконки можно только для личного использования (например, для резюме) Один набор стоит $ 19, а за $ 99 можно купить расширенный набор из 987 586 иконок.
13. Creativetail
Нужна необычная иконка? Немаловероятно, что вы найдете ее на Creative Tail.
14. Ego-icons
1500+ геометричных иконок в «угловатом» стиле.
15. Dreamstale
Бесплатные иконки смешаны с другими плюшками, типа текстур и шрифтов, но может это и неплохо?
16. Dryicons
Больше 5000 иконок в 77 наборах.
17. Mricons
Более 100 000 иконок на разные темы.
18. Endlessicons
Очень простые элегантные иконки доступны для скачивания в PNG и SVG формате.
19. Mariodelvalle.github
Набор из 350 иконок без какой-то определенной тематики (монстры, стрелки, баблы, коты и человечки), но они векторные, симпатичные и, возможно, именно тут найдется то, что вам нужно.
20. Goodstuffnononsense
Набор небольшой, зато хорошо отбран — иконки высокого качества. Имитируют рисование от руки и абсолютно бесплатные — не требуют даже ссылки.
21. Dribble
Еще один дизайнерский ресурс, где можно встретить интересные варианты. Может быть искать их не так удобно, зато можно встретить оригинальный набор.
Все иконки, так же как и изображения, защищены авторским правом. Но вы можете бесплатно использовать те из них, что распространяются по лицензиям Creative Commons. Могут быть:
- разрешенные к коммерческому использованию;
- запрещенные к коммерческому использованию.
Также важно правильно подписывать изображения по лицензии Creative Commons. Указание авторства — обязательное условие использования. Делается это по шаблону «Имя автора / Наименование источника / Тип лицензии».
Пример: John Wood / Flickr / CC BY-SA или Moscow State University / Wikimedia / CC BY
Где купить отдельную иконку или набор
Когда среди бесплатных иконок нет нужных вариантов или же вы нашли стек значков, которые здорово вписываются в концепцию страницы, купите их. Это дешевле, чем заказывать разработку значков у иллюстратора, потому что такие наборы продаются неоднократно.
01. PixelLove
- Иконки в стиле iOS 7.
- Продается паком из 5000 иконок.
- Стоимость — часть иконок можно скачать бесплатно. Полный стек стоит $ 59.
- Форматы — SVG, PNG, ICO, ICNS, AI, PSD.
02. Pixeden
- Плоские, объемные и контурные иконки в стеках.
- Поиск по категориям и ключевым словам.
- Стоимость — часть иконок можно скачать бесплатно, и использовать, указав автора. Остальные стеки доступны по подписке: $ 10 в месяц или $ 96 в год.
- Форматы — SVG, PNG, ICO, ICNS, AI, PSD.
03. IconFinder
- Плоские, объемные и контурные иконки.
- Поиск по категориям, ключевым словам, размеру и типу лицензии.
- Стоимость — часть иконок можно скачать бесплатно, и использовать на сайте, указав автора. Есть тарифы: $ 9 в месяц за 25 загрузок или $ 29 в месяц без ограничений по загрузкам. Можно оплачивать иконки поштучно: минимальная стоимость $ 1 за иконку.
- Форматы — AI, EPS, PSD.
04. IconSetc
- Контурные и одноцветные иконки.
- Поиск по ключевым словам и тегам.
- Стоимость — $7 в месяц или $69 в год.
- Форматы — SVG, PNG.
05. IconSweets
- Иконки в стиле iOS 7.
- Продается паком из 1000 иконок, без предпросмотра.
- Стоимость — $10.
- Форматы — PNG, PSD.
Как заказать иконки у иллюстратора
“
Эксклюзивные иконки — показатель качества вашего проекта. Если сет нарисован под конкретный проект, это сразу заметно.
Стоимость одной иконки зависит от исполнения — контур, плоский стиль или перспектива. Учитывается и смысл, который должен передавать значок. Например, нарисовать «яблоко» гораздо проще, чем изобразить понятие «независимость». Во втором случае придется потратить намного больше времени только на то, чтобы придумать не двусмысленную идеограмму.
В основном, иконки заказывают иностранцы по средней цене $ 10 за иконку. А недавно был очень большой российский проект, в котором сошлись на цене в 500 рублей за штуку. Если проект объёмный и интересный, всегда можно немного снизить цену :-)
Стоимость одной иконки зависит от исполнения — контур, плоский стиль или перспектива. Учитывается и смысл, который должен передавать значок. Например, нарисовать «яблоко» гораздо проще, чем изобразить понятие «независимость». Во втором случае придется потратить намного больше времени только на то, чтобы придумать не двусмысленную идеограмму.
В основном, иконки заказывают иностранцы по средней цене $ 10 за иконку. А недавно был очень большой российский проект, в котором сошлись на цене в 500 рублей за штуку. Если проект объёмный и интересный, всегда можно немного снизить цену :-)
На биржах фрилансеров много исполнителей, которые готовы нарисовать значки для вашего проекта. Но не каждый иллюстратор специализируется на иконках. Более того, не каждый понимает разницу между пиктограммой и идеограммой. Многие рисуют бездумно — первое, что пришло в голову или слизывают идеи с готовых работ, часто пародируя и само исполнение.
Найти иллюстратора можно на профильных ресурсах, предварительно отфильтровав тех, кто специализируется на иконках:
Найти иллюстратора можно на профильных ресурсах, предварительно отфильтровав тех, кто специализируется на иконках:
В каких случаях использовать иконки на сайте
1. Для навигации
Такие иконки — всегда ссылки или выпадающее меню. Чаще всего используют в интерфейсах приложений. На сайтах — редко, чтобы не запутать посетителей.
Меню
Корзина
Отчеты
Настройки
Привычные иконки для навигации, которые можно использовать без подписей
Самый популярный значок навигации в вебе — иконка-гамбургер, которой обозначают меню. Практически во всех интернет-магазинах можно найти иконку с тележкой — она ведет в корзину. Шестеренки или рожковой гаечный ключ ассоциируются с настройкой.
Не стоит экспериментировать с дизайном таких иконок и их расположением на сайте. Если у вас корзина, расположите ее в привычном правом верхнем углу с понятным пользователю значком.
Пользователи любят предсказуемость и дизайн должен помогать им ориентироваться на странице, а не ставить в тупик.
Не стоит экспериментировать с дизайном таких иконок и их расположением на сайте. Если у вас корзина, расположите ее в привычном правом верхнем углу с понятным пользователю значком.
Пользователи любят предсказуемость и дизайн должен помогать им ориентироваться на странице, а не ставить в тупик.
2. Чтобы привлечь внимание
“
Иконки решают проблему «быстрого взгляда». А это очень важно в рекламе и тогда, когда нужно зацепить внимание человека и провести его по странице до целевого действия.
Люди, привыкшие быстро скролить страницы, нуждаются в иконках. Их пугает большой текст, смешанный в единое полотно, поэтому они уходят с сайта.
Иконки помогают человеку сориентироваться в структуре и даже в режиме «просмотра по горизонтали» уловить суть. Поэтому иконки — важные элементы с точки зрения маркетинга, они работают как маяки и зацепки.
Люди, привыкшие быстро скролить страницы, нуждаются в иконках. Их пугает большой текст, смешанный в единое полотно, поэтому они уходят с сайта.
Иконки помогают человеку сориентироваться в структуре и даже в режиме «просмотра по горизонтали» уловить суть. Поэтому иконки — важные элементы с точки зрения маркетинга, они работают как маяки и зацепки.
В вебе такими значками сопровождают текст, чтобы расставить акценты и выделить особо интересные и важные моменты. Иллюстрации на таких иконках могут быть самыми разнообразными и совершенно непонятными без текстового сопровождения — одного слова или целой колонки.
Ключевые детали двухдневного путешествия Москва-Торжок
Иконки — якорные объекты, они вызывают интерес. Если посетителя заинтересовала иллюстрация, он обязательно прочтет подпись к ней.
С помощью иконок легко вынести главную информацию на сайте на первый план, чтобы она не потерялась в простыне текста.
Используйте их, чтобы выделить отдельные услуги или этапы сотрудничества, обозначить преимущества товара или рассказать о комплектации или тарифах.
С помощью иконок легко вынести главную информацию на сайте на первый план, чтобы она не потерялась в простыне текста.
Используйте их, чтобы выделить отдельные услуги или этапы сотрудничества, обозначить преимущества товара или рассказать о комплектации или тарифах.
3. Чтобы указать действие
Опять же, такие иконки характерны для интерфейсов. Они активные: нажатие сопровождается изображенным на них действием. Самые распространенные значки действий: создать, скачать, добавить, позвонить, написать, вырезать, вставить.
Сохранить
Выйти
Поделиться
Скопировать
Иконки-призывы к действию
Пользователи могут понимать иконки по-разному, поэтому используйте недвусмысленные иллюстрации, а еще лучше подписывайте их.
Одну и ту же иконку можно применить для разных целей — например, стрелку вниз. Она может указывать на два действия: «скачать» или «опуститься вниз страницы или блока».
Одну и ту же иконку можно применить для разных целей — например, стрелку вниз. Она может указывать на два действия: «скачать» или «опуститься вниз страницы или блока».
Скачать
Вниз страницы
Одинаковые стрелки для разных действий
Как выбрать иконки для проекта
Если хотите просто скачать и вставить иконку на сайт, нужны форматы ICO, PNG и SVG. Лучше всего использовать последний: это — векторный формат, который масштабируется до любого размера без потери качества.
Форматы AI и PSD — для тех, кто владеет графическими редакторами и может кастомизировать иконку под себя: добавить несколько штрихов, поправить тень, заменить цвета.
Контурная
Плоская
Объемная
Одна и та же иконка в разных стилях
“
Иконки нужны чтобы облегчить восприятие информации на сайте. Они не сделают сайт крутым и уникальным, а вот наоборот — легко.
Для всех проектов я использую иконки в SVG, и они здорово выглядят на экранах любого разрешения. Когда нужной иконки нет в SVG, отрисовываю ее, чтобы она не была черной овцой, хотя на это уходит много времени.
Очень важно подобрать иконки в одном стиле, которые впишутся в концепцию сайта и будут понятны посетителям при первом же взгляде.
Если у проекта маленький бюджет и на покупку или рисование иконок денег нет, самый адекватный вариант — контурные иконки.
Для всех проектов я использую иконки в SVG, и они здорово выглядят на экранах любого разрешения. Когда нужной иконки нет в SVG, отрисовываю ее, чтобы она не была черной овцой, хотя на это уходит много времени.
Очень важно подобрать иконки в одном стиле, которые впишутся в концепцию сайта и будут понятны посетителям при первом же взгляде.
Если у проекта маленький бюджет и на покупку или рисование иконок денег нет, самый адекватный вариант — контурные иконки.
1. Откажитесь от уникальности в пользу узнаваемости
Используйте понятные всем иконки. Задача сложнее, чем кажется, потому что одна и та же иллюстрация может вызвать разные ассоциации. Чтобы этого не произошло, откажитесь от уникальности в пользу узнаваемости.
Вернемся к понятиям пиктограммы и идеограммы. Иконка может быть как первым, так и вторым. Разберемся, в чем разница.
Пиктограмма — знак, который буквально обозначает то, что нарисовано.
Пиктограмма — знак, который буквально обозначает то, что нарисовано.
Знак «Плохая дорога»
Указатель «Туалет»
Инструмент «Кисть»
Примеры пиктограмм
Идеограмма — знак, который похож на пиктограмму, но обозначает какую-то идею или понятие, связанное с иллюстрацией.
Знак «Обгон запрещен»
Инструмент «Вырезать»
Табличка «Курить запрещено»
Примеры идеограмм
С пиктограммами все просто. А вот идеограммы часто не понимают, как раз из-за разных ассоциаций. Поэтому навигационные иконки и иконки, обозначающие действия, часто сопровождают текстом.
2. Ищите иконки в одном стиле, в идеале — одного автора
С популяризацией материального дизайна, в моду вошли плоские иконки. Они здорово выглядят и вписываются в концепцию любого сайта, если только там нет объемных объектов и градиентов. Могут быть одноцветными и цветными.
Иконки для сайта должны быть на одинаковой подложке — квадрат, круг — или без нее; если на значках есть тень, она должна падать с одной стороны и под одинаковым углом; используемые цвета — либо все чистые и насыщенные, либо все пастельные.
Всегда используйте иконки на сайте в одном стиле — объемные, плоские или контурные. Старайтесь подбирать иконки из одного стека, или хотя бы одного автора, потому что иллюстрации разных авторов будут бросаться в глаза, создавать впечатление небрежной и дешевой работы.
Иконки для сайта должны быть на одинаковой подложке — квадрат, круг — или без нее; если на значках есть тень, она должна падать с одной стороны и под одинаковым углом; используемые цвета — либо все чистые и насыщенные, либо все пастельные.
Всегда используйте иконки на сайте в одном стиле — объемные, плоские или контурные. Старайтесь подбирать иконки из одного стека, или хотя бы одного автора, потому что иллюстрации разных авторов будут бросаться в глаза, создавать впечатление небрежной и дешевой работы.
Как использовать иконки на странице
Иконки могут быть сверху, слева или справа, но никогда — снизу текста. Дизайнеры Тильды знают все тонкости идеального расположения иконок, и разработали универсальные блоки, которые вы можете добавить на страницу в несколько кликов.
Блоки с иконками ищите в библиотеке блоков, раздел «Преимущества». Замените стандартные значки: кликните на них, чтобы использовать стандартный загрузчик и найти нужный файл на компьютере.
Если среди готовых блоков вы не найдете нужный, создайте свой собственный при помощи инструмента «Нулевой» блок. Как это сделать — смотрите в видеоуроке «Zero Block: создание собственных блоков»
Если среди готовых блоков вы не найдете нужный, создайте свой собственный при помощи инструмента «Нулевой» блок. Как это сделать — смотрите в видеоуроке «Zero Block: создание собственных блоков»
1. Чтобы перечислить преимущества или возможности
2. Чтобы показать схему и этапы работы
3. Чтобы выделить услуги или ключевые моменты
4. Чтобы показать различия в тарифных планах или комплектациях
Подведем итоги
1
Используйте иконки на сайте, чтобы выделить главное, увлечь читателя и провести его по странице до целевого действия.
2
Используйте понятные иконки, а лучше — подписывайте их. Подпись — одно слово или целая колонка текста.
3
Чтобы добавить на страницу иконки, воспользуйтесь универсальными блоками Тильды. Это делается в три клика: «Библиотека блоков» → «Преимущества» → один из подходящих блоков. Если этого мало, соберите свой собственный «Нулевой» блок.
4
Выбирайте похожие по исполнению иконки. Лучше всего — из одного стека или одного автора. Если не получается найти схожие по стилю цветные иконки, используйте одноцветные или контурные.
5
Практически любую иконку можно найти и скачать бесплатно. Покупать и заказывать иконки стоит только для крупных проектов, когда хотите показать свою платежеспособность или просто потому, что вы так решили и можете себе это позволить.
Текст: Владислав Безпалько, Ира Смирнова
Иллюстрации, дизайн и верстка: Юлия Засс
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также:
