50+ наборов бесплатных иконок для сайта

Для начала

Проектирование одного единственного предмета граф. дизайна, с которым пользователи будут взаимодействовать при каждом использовании продукта, может показаться пугающей задачей. Красивая, узнаваемая и запоминающаяся иконка может сильно повлиять на популярность и успех приложения. Но как именно спроектировать «хорошую» иконку приложения? Что это вообще означает? Не бойтесь, я собрал несколько советов, которые помогут ответить на эти вопросы. Эта статья — ваше руководство по проектированию классных иконок.

Что такое «иконка приложения»?

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

Словом «логотип» сегодня разбрасываются очень легкомысленно. Иконка приложения — это не логотип. Хотя иконки и обладают некоторыми «брендинговыми» качествами, для них существует множество особых ограничений. Дизайнер должен понимать разницу: логотип — это масштабируемый векторный элемент брендинга, который используется на бланках и рекламных щитах. Иконки — обычно растровые изображения квадратной формы, которые подстраиваются под конкретные размеры и определенные контексты использования. Так что между логотипами и иконками множество различий: в подходе к работе, в инструментах, в процессе проектирования и, следовательно, в критериях успешности.

В комплект входят иконки разных размеров. Этот шаблон можно скачать на appicontemplate.com

С практической точки зрения, под иконкой приложения понимается комплект из PNG-файлов разных размеров — от небольших (29х29) и до крупных (1024х1024) — которые нужно связать с приложением. Операционная система будет использовать этот комплект иконок в различных контекстах: в App Store и Google Play, на панели настроек устройства и на домашнем экране.

Можно создавать иконки в любом редакторе, который поддерживает создание растровых файлов. Обычно для этого используют Photoshop, Illustrator и Sketch. Бесплатные инструменты типа appicontemplate.com предлагают удобные PSD шаблоны, которые станут отличным подспорьем на начальном этапе.

Установка через JS

Создаем переменную с кодом нашей иконки и используем его на нужном нам элементе

let icon = ‘<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\
<path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \
<line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \
<line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \
<circle cx=»12″ cy=»12″ r=»10″/> \
</svg>’; // наша иконка
let svgimg = document.querySelectorAll(«.happyface»); // находим все элементы с классом happyface
for( let i = 0; i < svgimg.length; i++){ // проходим циклом по всем элементам
svgimg.innerHTML = icon; // вставляем в них иконку
}

1 2 3 4 5 6 7 8 9 10

let icon='<svg width=»128″ height=»128″ role=»img» xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″ stroke=»#337AB7″ stroke-width=»2″ stroke-linecap=»square» stroke-linejoin=»miter» fill=»none» color=»#337AB7″>\     <path d=»M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328″/> \ <line stroke-linecap=»round» x1=»9″ y1=»9″ x2=»9″ y2=»9″/> \ <line stroke-linecap=»round» x1=»15″ y1=»9″ x2=»15″ y2=»9″/> \ <circle cx=»12″ cy=»12″ r=»10″/> \ </svg>’;// наша иконка let svgimg=document.querySelectorAll(«.happyface»);// находим все элементы с классом happyface for(leti=;i<svgimg.length;i++){// проходим циклом по всем элементам svgimgi.innerHTML=icon;// вставляем в них иконку }

И далее, как в варианте с CSS, вставляем нужную нам иконку куда угодно и сколько угодно раз.

<div class=»happyface»></div>

1	<div class=»happyface»></div>

На jQuery код получается проще:

let icon = ‘…’; // наша иконка
$(«.happyface»).html(icon); // вставляем иконку в элемент с классом happyface

1 2	let icon=’…’;// наша иконка $(«.happyface»).html(icon);// вставляем иконку в элемент с классом happyface

Наборы готовых иконок

iconmelon.com

Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью .

Upd. от 4.07.2020: к сожалению, сайт давно не работает.

От автора проекта есть вдохновляющая статья про SVG-иконки, анимации и эффекты: SVG icons FTW.

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

flaticon.com

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

В чем разница между иконкой и логотипом?

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

Иконки:

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

Логотипы:

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

Что такое SVG

SVG (сокращение от Scalable Vector Graphics — «масштабируемая векторная графика») — это вид графики, которую создают с помощью математического описания геометрических примитивов (линий, кругов, эллипсов, прямоугольников, кривых и так далее), которые и образуют все детали будущего изображения.

То есть в этом формате хранится не сама картинка, а инструкции для её построения по точкам и кривым. Они написаны на языке разметки SVG, расширяющем XML.

Достоинства SVG

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

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

У svg-графики есть ещё одно достоинство. Её можно открывать как HTML или CSS и менять в любом редакторе кода, и даже на лету. Подробнее об этом ниже.

И наконец, при прочих равных SVG весит намного меньше растровых изображений.

Лучшие минимальные пакеты иконок

1. Линии

Если вы поклонник минимализма, этот набор иконок попадет прямо в вашего союзника. Lines — это очень популярный пакет иконок, в котором есть значки, отображающие формы контуров самых популярных приложений. Приложение также приносит более 200 отобранных обоев, которые очень хорошо сочетаются с его коллекцией из более чем 2500 иконок . Самое приятное в этих значках состоит в том, что центр контуров значков прозрачен, что позволяет вам показать свои обои под значками.

Установка: бесплатно, $ 1, 99 для Pro

2. Дельта

Delta — один из моих самых любимых наборов иконок в этом списке. В приложении есть значки с приглушенными цветами, которые выделяют его среди других пакетов значков, большинство из которых имеют яркие цвета в соответствии с темой Google Material Design. Помимо красивого внешнего вида, приглушенные цветные значки также очень помогают, если вы используете свой смартфон в темноте. Delta включает в себя более 1400 иконок, созданных вручную, и поддерживает более 20 модулей запуска благодаря потрясающей панели управления CandyBar. Таким образом, независимо от того, какое приложение или панель запуска вы используете, вы можете ознакомиться здесь.

Установить: бесплатно, с покупками в приложении

3. Оттенки серого

Greyscale — это еще один набор иконок, предназначенный для выражения минимализма. Как следует из названия, приложение имеет значки с различными оттенками серого и лишено каких-либо ярких цветов. Приложение приносит более 300 значков с добавлением значков каждый месяц или около того. Он также имеет функцию маскировки значков, которая очень важна, если вы не хотите, чтобы безымянный значок выделялся как шип. Наконец, приложение также имеет 12 оригинальных обоев с поддержкой обоев Muzei.

Установить: бесплатно, с покупками в приложении

4. Whicons

Последний набор значков, отображающий минимализм, — это набор значков Whicons, который содержит белые значки. Приложение содержит более 5000 иконок, а также облачные обои . Как и другие пакеты значков, он также поддерживает запросы значков и функцию маскировки значков. Тем не менее, этот набор иконок не для всех. Мне лично это нравится, однако, у меня есть много друзей, которые абсолютно ненавидят белые темы. Что касается вас, посмотрите на картинку ниже и решите сами.

Установить: бесплатно, с покупками в приложении

5. Плоская минимальная

Пакет плоских минимальных значков использует массу цветов, чтобы привнести некоторые очень уникально выглядящие значки. Значки имеют круглую форму и имеют белый фон с цветными значками приложений и рамками . Он содержит более 4000 векторных иконок одинакового дизайна с поддержкой более 23 модулей запуска. Если вы любите плоские значки, проверьте это.

Установить: бесплатно

Спрайт или иконочный шрифт?

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

С помощью шрифта можно делать не только однотонные иконки, но и разноцветные.

Свой шрифт можно сделать, например, на сайте icomoon.io/app/. Примерная последовательность действий:

1. Выберите иконки из набора и/или загрузите свои.
2. Кликните внизу кнопку Font.
3. На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.

Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.

Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах.
Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:

также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии, а в некоторых других браузерах вместо иконок может оказаться всё что угодно, например, эмоджи (проблема была описана в статье Криса Коэра Icon System with SVG Sprites).

CSS-tricks, кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.

Ещё одна статья в поддержку SVG: Ten reasons we switched from an icon font to SVG.

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

Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.

Как существуют способы вставки SVG на страницу?

Iconset — must have.

Iconset — это лучший на сегодняшний день органайзер иконок для Mac и Windows.  Бесплатное, кроссплатформенное и быстрое приложение для управления иконками SVG для дизайнеров, разработчиков и продуктовых команд.

️ Скачать органайзер иконок: https://iconset.io

Лучший органайзер иконок для Mac и Windows

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

Упорядочивайте иконки и ищите их в одном месте

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

Используйте Iconset с любым дизайнерским приложением

Перетаскивайте иконки из Iconset прямо в свой любимый инструмент! Этот универсальный органайзер для иконок больше не требует установки плагинов или расширений.

Синхронизируйте значки на разных устройствах в реальном времени

Iconset поддерживает любые облачные сервисы, такие как Dropbox, OneDrive или Box, для включения иконок, которыми вы делитесь с вашей командой.

Не волнуйтесь, здесь нет ежемесячной подписки.

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

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

Лучший плоский стиль Icon Pack

1. Рондо

Если вы любите наборы иконок в плоском стиле, вам наверняка понравится Рондо. Рондо приносит более 3500 высококачественных иконок, которые выглядят абсолютно великолепно. Это также приносит особенность маски, которая накладывает темные значки. Мне также нравится тот факт, что приложение регулярно обновляется и ежемесячно добавляет новые значки, что делает это приложение свежим. Я давно пользуюсь этим набором иконок и никогда не скучаю по нему. Вам наверняка понравится этот.

Установить: бесплатно

2. Самогон

Самогон — один из лучших бесплатных пакетов иконок, которые вы можете получить для своего устройства Android. Приложение приносит плоские иконки с красивым дизайном и цветом. Он имеет более 900 векторных иконок, которые легко масштабируются в зависимости от размера вашего устройства и конфигурации дисплея . Что мне больше всего нравится в этом приложении, кроме самих значков, так это средство выбора значков, которое позволяет мне легко выбирать вновь добавленные значки, не заставляя меня копаться во всей библиотеке. Наконец, приложение также содержит 28 уникальных обоев, которые разработаны командой Moonshine и выглядят абсолютно красиво.

Установка: бесплатно, $ 1, 99 для Pro

Не используйте слова

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

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

Уникальность

Приложения в App Store в категории “Производительность” — это отличный пример отсутствия уникальности в дизайне.

Это в общем-то очевидно: постарайтесь создать нечто уникальное. Ладно, вы можете использовать какой-то существующий стиль или тренд, но сделайте это по-своему!

Ваша иконка будет соревноваться за внимание пользователя с другими иконками — и оригинальный дизайн может стать отличным преимуществом

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

Не важно, какой стиль дизайна вы предпочитаете: работа над уникальностью — это отличное упражнение, которое поможет вам найти новые идеи

Best Fun Icon Packs

1. Belle UI

Belle UI — это один из немногих наборов иконок, которые приносят иконки в форме сквирлов, которые на самом деле выглядят хорошо . В приложении представлено более 1400 значков, выполненных с использованием векторной графики, поэтому они будут хорошо смотреться на любом смартфоне независимо от размера. Как и другие наборы значков, он также имеет собственный набор обоев, благодаря которым значки приложений выделяются еще больше. Я действительно люблю этот набор значков, и вы обязательно должны попробовать этот.

Установить: бесплатно

2. Наксос Таз

Naxos Taz имеет один из самых уникальных наборов иконок, которые я когда-либо видел в пакете иконок. Иконки красочные и не соответствуют ни одному дизайну, вместо этого они имеют дизайн свободной формы, который выглядит действительно красиво. Существует более 2200 иконок, которые охватывают практически все популярные приложения. Есть также инструмент для запроса отсутствующих значков, а также поддержка поиска значков, обоев и динамических календарей. Это один из самых уникальных и красивых на данный момент бесплатных иконок в магазине Play Store.

Установить: бесплатно

3. Параллакс

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

Установить: бесплатно

4. H2O

Пакет иконок H2O представляет собой дизайн, аналогичный иконке Parallax, с иконкой в ​​форме бриллианта с приглушенными цветами. Тем не менее, иконки здесь более плоские и красочные . Этот красочный набор значков дает вам возможность выбрать из более чем 3600 значков, которые вдохновлены минимальными значками ОС Hydrogen. Наконец, пакет значков также содержит множество персонализированных значков от Samsung, Huawei EMUI, Motorola и One Plus.

Установить: бесплатно

5. Супергерой

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

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

Установить: бесплатно

6. UX 11

Последний забавный пакет иконок в этом списке — пакет иконок UX 11, который переносит иконографии iOS 11 на ваше устройство Android. Я знаю многих пользователей, которые предпочитают внешний вид значков приложений для iOS, и если вы один из них, это пакет значков для вас. Пакет i con содержит более 6000 иконок и 17 обоев в стиле iOS . Здесь особо нечего сказать. Если вы любите иконки iOS, попробуйте это.

Установить: бесплатно, с покупками в приложении

Чем не удовлетворяли классические решения

• Мы можем сделать тучу png-иконок и класть их внутрь тэгов image. И подменять на JS-событиях наведения мыши. Когда я делал сайт на третьем курсе, этот метод реально работал. Хорошо было, и не надо было заботиться о множестве соединений с сервером. Может, когда круг замкнётся и HTTP 2.0 победит… а пока это накладно. Поехали дальше.
• PNG-спрайты + CSS/background-image – хорошо, но не хватает. Наши коллеги из DevExtreme жили так некоторое время… но упёрлись в необходимость хоть какой-нибудь стилизации. Ведь с PNG-иконкой беда, её даже в красный на клиенте не покрасишь! Они перешли на Font Icons, а мы?..
• Font Icons для написания приложения (не большой библиотеки, а именно приложеньица) оказался слегка неудобным в работе. Изменения иконок требуют некоторого обслуживания (сбор иконок, сохранение в файл шрифта, хинтинги всякие…) Если в интернете уже есть все нужные вам иконки в составе Font Awesome – лучше варианта и искать не стоит. Но если иконки нужны свои… мы пока пошли дальше.
• Unicode-символы для иконок. Сам пошутил, сам посмеялся.
• SVG + CSS/background-image – имеем нормальное масштабирование. Не имеем стилизации непосредственно иконки. Нет, мы можем это заворкараундить – hover-состояние в принципе делается изменением цвета бэкграунда, а disabled-состояние — в какой-то мере изменением opacity. Это рабочий вариант, такой была наша первая залитая в репозиторий версия. Но вот сам рисунок мы стилизовать не можем. Потому что он не в DOMe. А когда в доме чего-то нету – это беда…
  К тому, что не является частью документа, не применишь стили CSS, не подкрасишь, не изменишь.

Подведем итоги

Итак, давайте вкратце подытожим, каким должен быть дизайн иконок для вашего мобильного приложения:

Пленительная простота

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

Узнаваемость

Никто не будет анализировать икону, чтобы понять ее значение.

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

Никаких фотографий, скриншотов или элементов интерфейса.

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

Проверьте значок на разных обоях

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

Вот и все! Мы желаем Вам удачи и много красивых иконок для ваших приложений.

Что же получилось в итоге

• Наши иконки хранятся и лежат в отдельных SVG файликах, маленьких, любимых в VCS, понятных в диффах и открываемых в браузере
• Наши иконки в момент билдёжки собираются внутрь одного большого файлика – icons.svg. То, что было файликом, становится шаблоном.
• Этот файлик нужно положить внутрь HTML-разметки. Руками, инструментом сборки или JavaScript

• На иконки можно ссылаться с помощью вот такой конструкции:

  Конструкция является более явной и более семантически верной, чем при создании иконки при помощи background-image

• Шаблон иконки лежит внутри DOM и может быть модифицирован через CSS
• Конкретная иконка делается на основе шаблона, сама в DOM не попадает, но попадает в теневой DOM и её можно стилизовать благодаря наследованию CSS-свойств от родительского элемента-якоря use.
• Иконку можно стилизовать как угодно на уровне документа – задавать внутренним элементам SVG классы и красить/модифицировать для всего документа как душе угодно и как CSS позволяет
• Для одной конкретной иконки можно модифицировать два цвета – ровно два. Один – цивилизованно, второй – благодаря магии. Магия очень сильная и работает везде, но магия имеет свою цену – будьте аккуратны в продакшене!
• JavaScript нужен максимум один раз, в процессе жизни страницы больше не используется

читалке Amazon Kindleлежат на ГитхабеGitHub Pages этого репозиторияUPDстилизацию 122-х настоящих иконокwww.flaticon.com