Иконки проектирование: Иконки проектирование — 2,412 бесплатных иконок — Вебджем.рф

Иконки — Группа Компаний «Единый Город»

.icon-text + text

Text here Text here Text here

Text here

.icon-text.grey + text

Text here Text here Text here

Text here

40 New Icons in 4.3

bed

buysellads

cart-arrow-down

cart-plus

connectdevelop

dashcube

diamond

facebook-official

forumbee

heartbeat

hotel (alias)

leanpub

mars

mars-double

mars-stroke

mars-stroke-h

mars-stroke-v

medium

mercury

motorcycle

neuter

pinterest-p

sellsy

server

ship

shirtsinbulk

simplybuilt

skyatlas

street-view

subway

train

transgender

transgender-alt

user-plus

user-secret

user-times

venus

venus-double

venus-mars

viacoin

Web Application Icons

adjust

anchor

Transportation Icons

ambulance

automobile (alias)

bicycle

bus

cab (alias)

car

fighter-jet

motorcycle

plane

rocket

ship

space-shuttle

subway

taxi

train

truck

wheelchair

Gender Icons

circle-thin

genderless (alias)

mars

mars-double

mars-stroke

mars-stroke-h

mars-stroke-v

mercury

neuter

transgender

transgender-alt

venus

venus-double

venus-mars

File Type Icons

file

file-archive-o

file-audio-o

file-code-o

file-excel-o

file-image-o

file-movie-o (alias)

file-o

file-pdf-o

file-photo-o (alias)

file-picture-o (alias)

file-powerpoint-o

file-sound-o (alias)

file-text

file-text-o

file-video-o

file-word-o

file-zip-o (alias)

Spinner Icons

These icons work great with the fa-spin class.

circle-o-notch

cog

gear (alias)

refresh

spinner

Form Control Icons

check-square

check-square-o

circle

circle-o

dot-circle-o

minus-square

minus-square-o

plus-square

plus-square-o

square

square-o

Payment Icons

cc-amex

cc-discover

cc-mastercard

cc-paypal

cc-stripe

cc-visa

credit-card

google-wallet

paypal

Chart Icons

area-chart

bar-chart

bar-chart-o (alias)

line-chart

pie-chart

Currency Icons

bitcoin (alias)

btc

cny (alias)

dollar (alias)

eur

euro (alias)

gbp

ils

inr

jpy

krw

money

rmb (alias)

rouble (alias)

rub

ruble (alias)

rupee (alias)

shekel (alias)

sheqel (alias)

try

turkish-lira (alias)

usd

won (alias)

yen (alias)

Text Editor Icons

align-center

align-justify

align-left

align-right

bold

chain (alias)

chain-broken

clipboard

columns

copy (alias)

cut (alias)

dedent (alias)

eraser

file

file-o

file-text

file-text-o

files-o

floppy-o

font

header

indent

italic

link

list

list-alt

list-ol

list-ul

outdent

paperclip

paragraph

paste (alias)

repeat

rotate-left (alias)

rotate-right (alias)

save (alias)

scissors

strikethrough

subscript

superscript

table

text-height

text-width

th-large

th-list

underline

undo

unlink (alias)

Directional Icons

angle-double-down

angle-double-left

angle-double-right

angle-double-up

angle-down

angle-left

angle-right

angle-up

arrow-circle-down

arrow-circle-left

arrow-circle-o-down

arrow-circle-o-left

arrow-circle-o-right

arrow-circle-o-up

arrow-circle-right

arrow-circle-up

arrow-down

arrow-left

arrow-right

arrow-up

arrows

arrows-alt

arrows-h

arrows-v

caret-down

caret-left

caret-right

caret-square-o-down

caret-square-o-left

caret-square-o-right

caret-square-o-up

caret-up

chevron-circle-down

chevron-circle-left

chevron-circle-right

chevron-circle-up

chevron-down

chevron-left

chevron-right

chevron-up

hand-o-down

hand-o-left

hand-o-right

hand-o-up

long-arrow-down

long-arrow-left

long-arrow-right

long-arrow-up

toggle-down (alias)

toggle-left (alias)

toggle-right (alias)

toggle-up (alias)

Video Player Icons

arrows-alt

backward

compress

eject

expand

fast-backward

fast-forward

forward

pause

play

play-circle

play-circle-o

step-backward

step-forward

stop

youtube-play

Brand Icons

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their «Remove Social Media Buttons» setting.

We will not use hacks to force them to display. Please

Medical Icons

ambulance

h-square

heart

heart-o

heartbeat

hospital-o

medkit

plus-square

stethoscope

user-md

wheelchair

SVG Icons

svg-burger

svg-search

svg-basket

svg-arrow-left

svg-arrow-right

svg_triangle_right

svg-close

svg-address

svg-email

svg-burger.white

svg-search.white

svg-basket.white

svg-spinner

svg-arrow-left.white

svg-arrow-right.white

иконки — Дизайн на vc.ru

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

19 039 просмотров

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

Привет, меня зовут Андрей Насонов, я UI/UX-дизайнер, работаю руководителем дизайн отдела в Elonsoft. Мы создаём программные продукты и помогаем компаниям из разных отраслей масштабировать свой бизнес.
Я занимаюсь дизайном с 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 байта

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

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

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

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

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

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

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

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

Feathericon
Хороший набор качественных outline иконок.

дизайнов иконок, тем, шаблонов и загружаемых графических элементов на Dribbble

Посмотреть YKTFV
Просмотреть NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография
NextMV Icons Фирменный стиль, набор иконок, веб-логотип, векторная типография
Просмотр значков Videoleap
Иконки Videoleap
View Oppo Icon Branding Design: набор иконок с плоским вектором
Фирменный дизайн Oppo Icon: набор иконок в плоском векторе
Иконография: брендинг иконок, набор иконок, визуальная идентификация, приложение
Посмотреть логотипы
Посмотреть иконографию Twitter
Иконография Twitter
Посмотреть линейную иконку
Линейный значок
Просмотр DesignMate — набор иконок
DesignMate — набор значков
Посмотреть 🕊
Посмотреть руководство по иконографии Assetly
Руководство по иконографии Assetly Брендинг
Посмотреть 🍀
Посмотреть набор иконок
Набор иконок
Просмотр LifeTree
Дерево Жизни
View Knicknack — набор иконок
Безделушка — набор иконок
Посмотреть ☕️
Посмотреть коллекцию иконок
Коллекция иконок
Посмотреть HeatWatch
Тепловые часы
Посмотреть иконографию UOW
Иконография UOW
Посмотреть ⟁
Посмотреть MetaSpark Logomark Брендинг, дизайн логотипа, визуальная идентификация
Логотип MetaSpark Брендинг, дизайн логотипа, визуальная идентификация
Посмотреть HeatWatch
Тепловые часы
Посмотреть изометрические значки
Изометрические иконки
Посмотреть обложку Okta 3d Animated Icons, набор иконок, логотип, пользовательский интерфейс, контур
Окта 3d анимированные иконки, набор иконок, логотип, пользовательский интерфейс, контур

Зарегистрируйтесь, чтобы продолжить или войдите

Идет загрузка…

7 Принципов дизайна иконок.

Создание качественного семейства иконок… | Хелена Чжан

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

Опубликовано в

Чтение: 10 мин.

29 января 2020 г.

 Другие материалы из серии «Иконография»:• Основы иконографии• 5 способов создать значок настроек• Демистификация сеток и ключевых линий значков• Привязка к пикселям в дизайне значков • 3 классических семейства значков

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

Основная цель значка — быстро передать идею.

Значки на приборной панели Prius Prime (Источник: Руководство 2020 г.)

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

Вот примерно как они складываются для меня:

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

Некоторые из самых непонятных значков, с которыми мне приходилось сталкиваться, находятся в приложении для фотографии VSCO . Можете ли вы догадаться, что они означают?

Значки в приложении VSCO

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

Со временем абстрактное может стать привычным при многократном использовании. Вот почему автомобильные контрольные сигналы стандартизированы; цель состоит в том, чтобы построить общее понимание. В 1984, Сьюзан Каре было поручено создать значок для функциональной клавиши на клавиатурах Apple. Она пришла к этому абстрактному символу, который также встречается в скандинавских знаках достопримечательностей.

Значок команды в SF Pro

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

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

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

Знакомые метафоры из семейства значков Phosphor Carbon

Стрелка — простой, но мощный символ, используемый в поиске пути:

Знак метро Нью-Йорка (Источник: Руководство по стандартам)

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

Получив понятный символ, убедитесь, что он читаем.

Значки в мобильном приложении Amtrak

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

Аналогичная проблема с приложением Transit . Их значок буфера обмена читается как капля, потому что расстояние между доской и клипом слишком маленькое:

Иконки в мобильном приложении Transit

Небольшая корректировка дает большое улучшение:

Изменена иконка буфера обмена.

При работе с несколькими фигурами оставляйте между ними достаточно места. Более тонкие штрихи и их большее количество сделают иконку более занятой и трудной для чтения.

Карты Google отлично справляются со своими значками общественного транспорта — очень удобочитаемыми при очень маленьком размере:

Значки Карт Google

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

Несбалансированная иконка воспроизведения

Хотя на этой иконке воспроизведения треугольник метрически расположен в центре круга, наши глаза считывают его как нестандартный. Более широкая часть треугольника кажется «тяжелее», чем вершина, и наклоняет ее влево.

Точно так же, как типографы вносят точные корректировки, чтобы создать оптическую иллюзию баланса в шрифте (обратите внимание на смещенные от центра точки на буквах «i» и «j» и выход за пределы «O») —

— иконографы вносят аналогичные корректировки чтобы сбалансировать значок. Чтобы исправить приведенный выше пример, немного сдвиньте элементы:

Значок сбалансированной игры

Лучше.

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

Идея, хорошо выраженная всего в нескольких словах, кажется эффектной и элегантной. Возьмите это утверждение:

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

Более кратко можно сказать (от Роберта Хайнлайна):

Когда один учит, двое учатся.

Материал довольно хорошо иллюстрирует краткость в своих системных значках. Вместо того, чтобы говорить:

Чрезмерно сложная иконка лодки (Источник: Материал)

Просто скажите:

Краткая иконка лодки (Источник: Материал)

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

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

значков Telegram

Иногда значки пользовательского интерфейса приобретают более иллюстративный стиль. Эти многоцветные иконки Yelp — восхитительный способ отобразить популярные поисковые запросы о еде. Креветка на значке тайской кухни восхитительна:

значков Yelp от Скотта Туска

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

Значки приложений Apple для Procreate, Firefox и Netflix

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

До iOS 13 Значки Apple имели всевозможные штрихи, заливки и размеры:

Значки с главного экрана Apple Быстрые действия до iOS 13

Прищурьтесь на этот набор. Некоторые значки кажутся тяжелее других?

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

Компания Apple недавно скорректировала курс, представив символы SF, впечатляющий спутник Сан-Франциско. SF Symbols включает в себя более графический стиль значков с 9 весами и 3 масштабами (возможно, немного сложным, но определенно тщательным). От значка к значку и между вариантами заливки и контура они кажутся гораздо более гармоничными.

Значки из Apple SF Symbols

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

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

Выборка значков из Phosphor для Android

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

Набор иконок из коллекции Phosphor Icons

У каждого набора иконок есть своя изюминка. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает?

Иконки Waze

Любимый интерфейс Waze во многом зависит от их иконографии. Эти красочные массивные значки говорят: «Мы причудливые!»

Иконки Twitter мягкие, легкие и четкие:

Иконки Twitter

Иконки Sketch нежные и воздушные:

Иконки Sketch Яника Баумгартнера

Freemojis милые и привлекательные:

Freemojis от Streamline

Наборы значков для Android предназначены для широкого спектра тем оформления главного экрана — вот абстрактный, пиксельный, пузырьковый и неоновый стиль:

Сверху вниз, слева направо: iJUK , PixBit, Crayon, Linebit

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

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

Систематизировано

Держите мастер-файл в чистоте, хорошо называйте свои активы и размещайте их так, чтобы их было легко найти. Рассмотрим лучший способ классификации. По алфавиту? По размеру? По типу?

Файл Nucleo Sketch, организованный по типам на страницах

Хорошо документированный

Сформулируйте ключевые принципы семейства иконок:

 Примеры принципов семейства иконок Phosphor (отсылка к тому, что мы рассмотрели выше):  • Ясность. Будьте ясны в первую очередь.  Сделать значок узнаваемым и читаемым. Никогда не жертвуйте ясностью того, что представляет значок.  • Краткость. Используйте как можно меньше деталей. Стиль  Phosphor сдержанный. Будьте лаконичны и преднамеренны в каждом штрихе, чтобы передать суть того, что изображается.   • Персонаж. Будьте причудливыми.  Аккуратно добавляйте уникальные детали, чтобы привнести немного тепла и игры в то, что в противном случае могло бы показаться очень строгим.

Перечислите технические правила:

 Примеры технических правил из семейства значков Phosphor:  •  Используйте холст  48 x 48 пикселей   •  Используйте обводку  1,5 пикселя по центру   • 90 242 Используйте закругленные торцевые заглушки    •  Используйте  смежных штрихов , если неразрывные сегменты не помогают для понимания  •  Используйте  прямые сегменты, идеальные дуги и приращения угла 15° , где это возможно  • При необходимости отрегулируйте кривые  для соблюдения принципов проектирования  •  Используйте  приращения целых, четных чисел  для измерений, где это возможно;  •  Используйте следующие ключевые линии формы  : 28 x 28 пикселей круги, 25 x 25 пикселей квадраты, 28 x 22 пикселей горизонтальные прямоугольники, 22 x 28 пикселей книжные прямоугольники  •  Сохраняйте  6 пикселей толстую обрезку.  зона

Переработайте их и опубликуйте документацию, если хотите:

Значки Material System
Значки пользовательского интерфейса IBM, значки приложений и руководство по значкам для участников
Иконки Shopify Polaris

Протестировано

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

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

Тестовые листы, используемые в процессе контроля качества Phosphor для Android
Пользовательские инструменты
Более того, создавайте инструменты, облегчающие создание, производство и использование значков.
Для иконок Phosphor мы создали специальный веб-инструмент для проверки иконок рядом друг с другом и на месте.

Иконки проектирование: Иконки проектирование — 2,412 бесплатных иконок