Бесплатные иконки

Iconset — must have.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Свой шрифт можно сделать, например, на сайте 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 на страницу?

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, попробуйте это.

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

Что такое SVG

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

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

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

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

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

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

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

Как менять цвет svg-иконки через CSS

Верстальщику часто приходится обыгрывать реакцию иконки при наведении на неё мышки. В случае с svg-картинками можно просто менять их цвет.

Научимся это делать на примере иконки «ВКонтакте»:

Логотип сложный, поэтому svg-код, который его математически описывает, довольно длинный. Посмотрим, как это выглядит в HTML:

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

Обратите внимание на тег (в переводе с английского «путь»). Он позволяет задать любую фигуру компактной строкой — описанием пути от начальной точки до конечной через промежуточные координаты.. Строка с данными задаётся атрибутом d тега

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

Строка с данными задаётся атрибутом d тега <path>. Она содержит команды, которые закодированы набором букв и чисел. Буква представляет тип команды, а числа — её параметры (чаще всего координаты).

Теперь мы запросто добавим к ссылочному тегу <a> псевдокласс: hover и зададим через него новый цвет svg-изображения. Это делается в CSS с помощью свойства fill («заливка»).

Проверьте, как это работает: наведите курсор на иконку — например, в песочнице Codepen.

И ещё один нюанс. Заливка может быть задана атрибутом у <svg> (fill=»#000″). Тогда работать с ней через CSS не получится, так как css-стили не могут перебить правила, заданные атрибутами. В этом случае стоит просто вручную удалить этот атрибут у <svg>.

Логотипы и favicon

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

Logomakr

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

Online Logomaker

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

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

Canva

Известный в кругах дизайнеров и SMM-щиков проект, который часто используют для создания красивых изображений. Не все элементы бесплатны — часть из них можно купить отдельно либо приобрести подписку за 12,95 долларов в месяц. Но перед этим есть бесплатный 30-дневный тестовый период.

Designimo

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

Иконки

Captain Icon

Здесь можно найти более 350 векторных иконок. Их можно легко масштабировать без потери качества. Форматы разные: eps, psd, png, svg, а также веб-шрифты и Sketch.

Иконки распространяются под лицензией CC BY-SA, то есть материалы можно использовать в личных и коммерческих проектах.

Ego

Иконки представлены в синих и серых оттенках.

Endless Icons

Здесь есть множество бесплатных черно-белых иконок. Помимо общего каталога, иконки можно выбрать по тематическим группам: fashion, food, shopping, social media и так далее. Есть еще разбивка по тегам.

Все иконки можно использовать как в личных, так и в коммерческих проектах.

Flaticon

Один из самых крупных сайтов с бесплатными иконками: здесь представлено больше миллиона векторных иконок. Бесплатно использовать их можно при условии, если вы укажете авторство. Если желания указывать нет, то вам нужно купить платную подписку. Она стоит 9,99 евро в месяц либо 89,99 евро за год (т.е. 7,50 евро в месяц).

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

Icofinder

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

Организация иконок

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

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

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

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

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

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

2. Онлайн-сервисы:

3. Дизайнер. Если вам недостает опыта, но вы готовы выделить бюджет на брендинг, наймите графического дизайнера, который специализируется на иконках приложений: обратитесь на биржи (Upwork, Fiverr), попросите рекомендаций у знакомых или поищите в соцсетях.

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

iconmelon.com

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

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

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

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

flaticon.com

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

Усложняем задачу

Рассмотрим более сложную ситуацию — когда иконка состоит из нескольких простых svg-изображений. Например, примитивная лупа из прямоугольника и круга:

Код для кнопки с иконкой лупы будет таким:

Проблема здесь в том, что внутри svg-иконки два разных тега:

• <rect> (прямоугольник — ручка лупы)
• и <circle> (круг — ободок лупы).

Сделать как в примере с «ВКонтакте» не получится, потому что прямоугольник в нашем случае имеет заливку (fill), а круг — обводку (stroke).

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

Как видите, при наведении на кнопку мы сперва нашли rect, потом circle, то есть разделили логику.

Делить код таким образом приходится нечасто, но помнить об этой возможности полезно.

Установка через 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

Для начала

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

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

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

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

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

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

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

Технические характеристики иконок для Android и iOS

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

	Google Play Store (Android)	App Store (iOS
Размер	512 px × 512 px	iPhone: 180px × 180px (60pt × 60pt @3x), 120px × 120px (60pt × 60pt @2x) iPad Pro: 167px × 167px (83,5pt × 83,5pt @2x) iPad, iPad mini: 152px × 152px (76pt × 76pt @2x) App Store: 1024px × 1024px (1024pt × 1024pt @1x)
Формат	32-разрядный PNG	PNG
Цветовое пространство	sRGB	sRGB или P3
Форма	Полный квадрат. Google Play автоматически скругляет углы (радиус скругления — 20% от размера) и добавляет тени	Квадрат без закругленных углов и теней

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

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

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

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

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

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

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

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

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

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

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

Иконки:

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

Логотипы:

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

Установка в HTML

Можно вставить SVG графику непосредственно в нужное место HTML кода:

<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>

1 2 3 4 5 6

<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>

Вариант хороший, но только для одной картинки. Если картинок много, у нас получится масса одинакового кода.

Отображение иконок в браузерах без поддержки SVG

В данный момент самый удобный и надежный способ вставки — в виде спрайта.

Для замены картинок в IE8 и старше можно использовать способ с множественными фонами:

Для старых Опер можно использовать такой селектор:

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

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

UPD: Большое спасибо Роме Комарову за дополненния к тексту.

UPD от 04.04.14:

1. Дополнение от Сережи Борончиева: SVG в data URI будет работать везде, если заэскейпить строку, например, с помощью (JS).
2. Прекрасный пост от Lеа Verou: Dynamically generated SVG through SASS + A 3D animated RGB cube!. Она предлагает использовать SASS, чтобы автоматически генерировать SVG-градиенты для использования в data URI.

Заключение

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

• Позаботьтесь о простоте, узнаваемости и уникальности.
• Следите за трендами, чтобы оставаться актуальным.
• Учитесь у топ-брендов. Например, из этого списка самых популярных мобильных приложений 2019 года:

1. Facebook Messenger
2. WhatsApp
3. TikTok
4. Instagram
5. SHAREit
6. Likee
7. Snapchat
8. Netflix
9. Spotify

Source: by Parmar Raj

Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.

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

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

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

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

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

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

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

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

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

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

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

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