Веб иконки: Иконки веб-страница — 61,979 бесплатных иконок

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

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

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

Привет, меня зовут Андрей Насонов, я 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 иконок

---

Спасибо

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

Компьютерные иконки Символ, символы, веб-дизайн, симметрия, интернет png

Компьютерные иконки Символ, символы, веб-дизайн, симметрия, интернет png

теги

• веб-дизайн,
• симметрия,
• интернет,
• веб-браузер,
• символы,
• линия,
• площадь,
• значок Дизайн,
• плоский дизайн,
• электронная почта,
• круг,
• черно-белый,
• веб-страница,
• значки компьютеров,
• символ,
• картинки,
• png,
• прозрачный,
• бесплатная загрузка

Об этом PNG

Размер изображения

1024x1024px

Размер файла

33. 53KB

MIME тип

Image/png

Скачать PNG ( 33.53KB )

изменить размер PNG

ширина(px)

высота(px)

Лицензия

Некоммерческое использование, DMCA Contact Us

• Компьютерные иконки Интернет веб-страница, всемирная паутина, текст, глобус, логотип png 980x980px 60.75KB
• Логотип веб-разработки, веб-сайт, веб-дизайн, симметрия, интернет png 2000x2000px 121.91KB
• Компьютерная Иконка Веб-страница, личность, угол, текст, логотип png 1600x1600px 70.36KB
• Компьютерные Иконки, Лучший, веб-дизайн, симметрия, интернет png 2000x2000px 121. 27KB
• Иконка Интернет Доступ в Интернет Веб-браузер, обведите кружком линию через него, угол, текст, другие png 1600x1600px 32.88KB
• черный логотип WhatsApp, WhatsApp значки компьютеров, WhatsApp, логотип, монохромный, черный png 512x512px 24.25KB
• Email Logo Icon, Email, черный конверт с логотипом, Разное, текст, мобильные телефоны png 500x500px 11.73KB
• Компьютерные иконки Веб-страница Интернет, Глобал, веб-дизайн, текст, логотип png 1000x1000px 43.17KB
• Компьютерные иконки, сайт, веб-дизайн, логотип, серый png 2400x2400px 93.44KB
• org/ImageObject»> Веб-разработка Веб-дизайн Интернет Сервис веб-хостинга, всемирная паутина, логотип, симметрия, сфера png 1078x1078px 42.91KB
• Веб-разработка Компьютерные иконки, веб-иконки, веб-дизайн, текст, логотип png 1600x1600px 52.47KB
• Компьютерные иконки, тотем, веб-дизайн, симметрия, интернет png 2000x2000px 114.95KB
• Логотип WhatsApp, значки компьютеров WhatsApp, WhatsApp, текст, андроид, символ png 512x512px 9.23KB
• Иконки компьютеров AOL Mail Адрес электронной почты Веб-почта, электронная почта, разное, угол, треугольник png 512x512px 12.81KB
• org/ImageObject»> Компьютерные иконки логотип, логотип INSTAGRAM, логотип Instagram, Разное, текст, другие png 512x512px 9.37KB
• Лого Веб разработка, сайт, веб-дизайн, симметрия, интернет png 600x600px 21.3KB
• Иконка электронная почта, электронная почта, разное, угол, текст png 960x685px 20.92KB
• Компьютерные иконки Интернет Веб-браузер, всемирная паутина, текст, логотип, симметрия png 512x512px 10.33KB
• Компьютерные иконки Интернет Гиперссылка Веб-браузер, всемирная паутина, текст, товарный знак, логотип png 512x512px 11.53KB
• Веб-разработка Logo World Wide Web Веб-сайт, веб-символ, веб-дизайн, симметрия, монохромный png 2000x2000px 15. 29MB
• IPMA Email Phone Message, значок электронной почты, разное, угол, телефонный звонок png 1080x1080px 26.78KB
• Компьютерные иконки Электронная почта, Gmail, Разное, угол, логотип png 1200x1200px 48.8KB
• Адрес электронной почты Компьютерные иконки, почта, разное, угол, треугольник png 980x984px 71.39KB
• белый и серый глобус логотип, компьютерные иконки Интернет World Wide Web, Белый дом, логотип, веб-сайт, бренд png 800x800px 49KB
• Email маркетинг Компьютерные иконки Адрес электронной почты, электронная почта, Разное, текст, прямоугольник png 512x512px 31. 18KB
• Веб-разработка Веб-дизайн Логотип, сайт, стрелка и глобус логотип, поисковая оптимизация, текст, товарный знак png 3217x3128px 209.97KB
• электронная почта, значки электронной почты компьютера Электронная рассылка, электронная почта, Разное, логотип, интернет png 878x1024px 415.33KB
• Компьютерные иконки, всемирная паутина, симметрия, веб-шаблон, интернет png 800x800px 47.96KB
• черный логотип, компьютерная веб-страница значков, всемирная паутина, веб-дизайн, глобус, симметрия png 1200x1200px 28.49KB
• Компьютерная Иконка Веб-страница, планета, веб-дизайн, симметрия, интернет png 512x512px 14. 78KB
• Веб разработка Веб дизайн Компьютерные иконки, веб дизайн, веб-дизайн, текст, логотип png 768x768px 41.41KB
• www logo, Интернет Компьютерные иконки, всемирная паутина, веб-дизайн, текст, товарный знак png 2400x2400px 69.58KB
• Компьютерные иконки Email Symbol, электронная почта, разное, угол, логотип png 1000x1000px 14.07KB
• Значок LinkedIn, Linkedin, текст, прямоугольник, логотип png 500x500px 42.31KB
• Компьютерные иконки Веб-браузер, всемирная паутина, текст, товарный знак, логотип png 980x982px 78.83KB
• org/ImageObject»> Веб-разработка Адаптивный веб-дизайн Разработка программного обеспечения, веб-дизайн, компьютерная сеть, веб-дизайн, поисковая оптимизация png 1207x650px 37.34KB
• белый телефон логотип, значки компьютеров телефон мобильные телефоны, номер телефона, Разное, текст, телефонный звонок png 980x980px 75.5KB
• Ящик для электронной почты Computer Icons Symbol Адрес электронной почты, адрес электронной почты, разное, угол, прямоугольник png 512x512px 5.44KB
• черный циферблат логотип, WhatsApp Email значки компьютеров, WhatsApp, текст, мобильные телефоны, область png 1600x1600px 28.04KB
• WWW логотип, логотип веб-страницы, всемирная паутина, текст, симметрия, интернет png 980x862px 87.
  26KB
• земля логотип, значок Интернет, веб-символ, компьютерная сеть, Интернет, веб-символ Клипарты png 900x900px 56.02KB
• Значок веб-сайта электронной почты, электронная почта, разное, угол, текст png 512x512px 19.97KB
• значок телефона, телефонный звонок компьютер иконки iPhone Symbol, TELEFONO, электроника, оправа, мобильные телефоны png 980x980px 69.06KB
• черно-белый логотип электронной почты, электронная почта иконки компьютеров дизайн иконок, электронная почта, Разное, угол, треугольник png 1000x1000px 47.54KB
• Веб разработка Веб дизайн, интернет технологии, веб-дизайн, логотип, интернет png 512x512px 12. 1KB
• Телефонный звонок Компьютерные иконки Символ, значок телефона, Разное, логотип, монохромный png 512x512px 7.49KB
• круглый черный телефон логотип, значок телефона, файл телефона, электроника, логотип, черно-белый png 1969x1969px 111.33KB
• логотип сообщения, Yahoo!Почта Адрес электронной почты Веб-почта, значок электронной почты, Разное, угол, треугольник png 980x980px 41.89KB
• обмен сообщениями логотип, адрес электронной почты Электронная рассылка Логотип Интернет, гофрированная лента, Разное, синий, угол png 940x940px 45.81KB
• Веб-разработка Адаптивный веб-дизайн Компьютерные иконки, веб-страница, веб-дизайн, текст, логотип png 512x512px 23. 27KB

Создайте веб-значок

НАЧИНАЮЩИЙ · 5 МИН

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

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

Настройте свой проект

Запустите Illustrator и нажмите кнопку «Создать» или нажмите «Control+N» (Windows) или «Command+N» (macOS). Выберите вкладку Web и введите размер справа; мы набрали 400 пикселей для ширины и высоты. Совет: При создании дизайна значков полезно работать в квадратном формате.

Нажмите «Создать».

Рисование основных фигур

Сначала вы нарисуете корпус камеры.

Выберите инструмент «Прямоугольник» на панели «Инструменты». Нажмите и перетащите прямоугольник на монтажной области.

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

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

Узнайте больше об использовании быстрых направляющих в Illustrator.

Далее вы добавите вспышку.

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

Совет : Чтобы пропорционально изменить размер круга, нажмите Shift и перетащите угловой виджет.

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

Теперь вы создадите форму линзы.

Выбрав инструмент «Эллипс», наведите указатель мыши на больший прямоугольник, пока не появится слово center . Нажмите Alt (Windows) или Option (macOS) и перетащите круг, нарисованный из центра. Найдите направляющие перекрестия и отпустите курсор, когда круг станет нужного размера.

Нарисуйте маленький круг сбоку. Щелкните в его центре и перетащите его на больший круг, пока не увидите слово , пересекающее или в центре 9.появляется 0048. Опустите меньший круг на место.

Комбинирование фигур

На этом этапе вы объедините прямоугольники.

Нажмите V для инструмента «Выделение». Щелкните большой прямоугольник; затем нажмите Shift и щелкните маленький прямоугольник, чтобы выбрать оба. Выберите инструмент «Создание фигур» и перетащите линию, соединяющую оба прямоугольника, как показано на рисунке.

Добавить цвет

Теперь вы примените к фигурам цвет заливки и различные атрибуты обводки.

Нажмите V, чтобы переключиться на инструмент «Выделение». Выбрав корпус камеры, щелкните образец цвета заливки в разделе «Внешний вид» на панели «Свойства». Выберите параметр «Образцы» справа и щелкните цвет на панели «Образцы». Затем щелкните образец «Обводка» и выберите «Нет», чтобы удалить обводку.

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

Чтобы раскрасить линзу, сначала выберите внешний круг; затем нажмите Shift и щелкните второй круг, чтобы выбрать и его. Не применяйте заливку и белую обводку. Увеличьте Толщину обводки до 5 pt.

Завершающий штрих

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

Выберите корпус камеры. Нажмите A, чтобы переключиться на инструмент «Частичное выделение», и перетащите виджет с закругленными углами, чтобы скруглить все углы одновременно.

Сохранить для веб-вывода

Если вам нужно изменить размер значка относительно монтажной области, выберите «Выделение» > «Все», чтобы выбрать весь значок. Нажмите V, чтобы переключиться на инструмент «Выделение». Нажмите Alt+Shift (Windows) или Option+Shift (macOS) и перетащите угловой маркер, чтобы изменить его размер пропорционально центру. Наконец, измените положение значка, перетащив его центр.

Выберите «Файл» > «Сохранить». Дайте вашему проекту уникальное имя и сохраните его в формате Adobe Illustrator (AI). Вы можете редактировать этот файл в Illustrator в любое время.

Чтобы сохранить окончательную версию, готовую к публикации в Интернете, выберите «Файл» > «Экспорт» > «Экспорт для экранов». Выберите место и выберите формат PNG.

Совет: Перед экспортом можно изменить размер монтажной области. Выберите «Ширина» или «Высота» в раскрывающемся меню «Масштаб» и введите новый размер.

Щелкните значок шестеренки и выберите Art Optimized (Supersampling) в раскрывающемся меню Anti-aliasing. Нажмите «Сохранить настройки», а затем нажмите «Экспорт монтажной области».

Надеюсь, вам было весело.