Веб иконки: Пакет значков Web design | Значки .SVG 50

Дизайн система: Иконки / Хабр

Подготовка иконок к работе в дизайн системе

Кто я и почему об этом пишу?

Привет, меня зовут Андрей Насонов, я UI/UX дизайнер работаю руководителем дизайн отдела в компании которая создаёт веб-сервисы и помогает компаниям из разных отраслей масштабировать свой бизнес. Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб дизайнером. Мне интересна разработка сервисного дизайна, проектирование дизайн систем, и автоматизация дизайн и бизнес процессов.

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

---

Помещайте иконки во фреймы

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

Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.

Оставлять иконки без фрейма нельзяВсегда помещайте иконки во фрейм

Экспортировать иконки нужно также во фрейме.

Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.

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

Иконка выровнена по фактическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влевоИконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру

---

Компонент из фрейма с иконкой

Создайте компонент из фрейма с иконкой.

Компонент из фрейма с иконкой

Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».

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

Замена иконок с помощью функции «Instance»

Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.

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

Заодно и новые слова на английском выучите если у вас с ним беда, как и у меня. 😄

---

Хранение иконок

Статья 224, лишение свободы…….. ладно 😄

Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.

Основные иконки 24x24px мы храним в артборде “Icons 24”. Остальные иконки размер которых больше или меньше 24px храним в “Other Icons”. Обычно их не очень много.

Артборд “Trash Icons” нужен чтобы хранить в нем различные варианты иконок. Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд “Icons 24”, а другие два варианта иконки перемещаете в артборд “Trash Icons”. На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.

---

Фон и цвет

Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.

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

Удаление фона и применение стиля цвета

Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.

Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.

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

---

Констрейнтс

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

Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.

Настройка constraints

---

Массовые действия с иконками

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

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

---

Мусор в иконках

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

Например, Material Design иконки имеют белый фоновый слой.

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

В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.

После того, как вы объединили слои, не забывайте применять “Outline Storke” к объединенной фигуре.

Объединение иконки в один слой

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

Так выглядит SVG код иконки когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров “Fill” для разных элементов иконки. Так делать нельзя.

Размер файла иконки 1318 байт

А так выглядит SVG код иконки когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра “Fill”. Один для фона контейнера, другой для цвета иконки. Так делать можно.

Размер файла иконки 803 байта

После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.

После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.

Размер файла иконки 588 байт

---

Ресурсы с иконками

Ну и напоследок несколько ресурсов откуда можно брать иконки.

Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.

Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск. Да и файл иконки содержит в себе лишний слой с белым фоном, который на мой взгляд, не нужен.
Плагин в Figma.

Boxicons
Есть хорошие альтернативы иконкам из предыдущих ресурсов. Но не все иконки pixel perfect. Так же имеется плагин в Figma.

Feathericon
Хороший набор качественных outline иконок. Иконки сделаны контуром с обводкой, что позволяет масштабировать и изменять толщину линий самих иконок.
Плагин в Figma

IBM icons
Иконки от IBM созданные самой компанией и сообществом.

Remixicon
Большое количество хороших Fill и Outline иконок

---

Спасибо

А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.

3D финансовых и бизнес веб-иконки свободный вектор

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

Пожаловаться

Скачать (1,8 МБ)

• Простые и практические веб-дизайн значок вектор материала

• веб дизайн значок вектор материала

• 3D Financialand бизнес веб-иконки

• Векторных веб-иконки

• Управление & бизнес рука рисовать иконку

• Icon Pack вектор 3

• Значок вектора социальной сети набор

• Icon Векторный Пасхальный пакет

• скидка продаж ярлык иконы вектор

Советы по установке и использованию бесплатной библиотеки значков Ionicons

7.5.1″> Ionicons — это набор значков с полностью открытым исходным кодом, содержащий 1300 значков, созданных для веб-приложений, приложений для iOS, Android и настольных компьютеров. Ionicons был создан для Ionic Framework, кросс-платформенный гибрид и платформа Progressive Web App.

Использование веб-компонента

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

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

Установка

Если вы используете Ionic Framework, Ionicons упакован по умолчанию, поэтому установка не требуется. Хотите использовать Ionicons без Ionic Framework? Поместите следующее

22.6.1"> , чтобы включить их.

Базовое использование

Для использования встроенного значка из пакета Ionicons , заполните атрибут name компонента ion-icon :

Пользовательские значки

Чтобы использовать пользовательский SVG, укажите его URL-адрес в src

атрибут для запроса внешнего файла SVG. Атрибут src работает так же, как в том смысле, что URL-адрес должен быть доступен с веб-страницы, запрашивающей изображение. Кроме того, внешний файл может быть только действительным svg и не разрешает скрипты или события внутри svg элемент.

Варианты

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

Специфика платформы

80.5.18"> При использовании значков в Ionic Framework вы можете указать разные значки для каждой платформы. Использовать мкр и атрибуты ios и указать значок/вариант для конкретной платформы.

Размер

Чтобы указать размер значка, вы можете использовать Атрибут size для предустановленных размеров шрифта.

Или вы можете установить конкретный размер, применив размер шрифта Свойство CSS на ion-icon компонент. Рекомендуется использовать размеры пикселей, кратные 8 (8, 16, 32, 64 и т. д.)

 ion-icon {
  размер шрифта: 64px;
} 

109.5.25"> Color

Укажите цвет значка, применив свойство CSS color к ion-icon компонент.

 ион-значок {
  цвет синий;
} 

Толщина хода

При использовании контур вариант значка можно отрегулировать толщину штриха для улучшения визуального баланса относительно размера значка или относительно веса соседнего текста. Вы можете установить конкретный размер, применив --ionicon-stroke-weight Пользовательское свойство CSS для ion-icon компонент. Значение по умолчанию 32px

 ion-icon {
  --ionicon-штрих-ширина: 16px;
} 

Миграция с v4

См. примечания к выпуску 5.0 для получения списка удалений/переименований значков. Вы можете найти заархивированную версию сайта v4 здесь.

значков — манифесты веб-приложений

Тип	Массив
Обязательно	Да

Элемент icons задает массив объектов, представляющих файлы изображений, которые могут служить значками приложений для различных контекстов. Например, их можно использовать для представления веб-приложения среди списка других приложений или для интеграции веб-приложения с переключателем задач ОС и/или системными настройками.

 "значки": [
  {
    "src": "иконка/lowres.webp",
    "размеры": "48x48",
    "тип": "изображение/webp"
  },
  {
    "src": "значок/низкое разрешение",
    "размеры": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "размеры": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "иконка/hd_hi. svg",
    "размеры": "любые"
  }
]
 

Объекты изображения могут содержать следующие значения:

Элемент	Описание
размеры	Строка, содержащая размеры изображения, разделенные пробелами, с использованием того же синтаксиса, что и размеры атрибут.
источник	Путь к файлу изображения. Если src является относительным URL-адресом, базовый URL-адрес будет URL-адресом манифеста.
тип	Подсказка относительно типа носителя изображения. Назначение этого члена чтобы позволить пользовательскому агенту быстро игнорировать изображения с типами мультимедиа, которые он делает не поддерживается.
назначение	Определяет назначение изображения, например, если изображение предназначено служить какой-то специальной цели в контексте хост-ОС (т. е. для лучшая интеграция). назначение может иметь одно или несколько следующих значений, разделенных пробелами: монохромный : пользовательский агент может отображать этот значок там, где монохромная иконка со сплошной заливкой нужно. Информация о цвете в значке отбрасывается и только используются альфа-данные. Затем значок может использоваться пользовательским агентом. как маска поверх любой сплошной заливки. маскируемый : Изображение разработано с маски иконок и безопасная зона таким образом, чтобы любая часть изображения за пределами безопасной зоны могла безопасно игнорироваться и маскироваться агентом пользователя. любой : Пользовательский агент может отображать значок в любом контекст (это значение по умолчанию). Оставить комментарий Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт