Где взять бесплатные иконки
Не тратьте время и деньги: мы собрали 13 источников бесплатных иконок для ваших дизайн-проектов.
Иконки — это элементы интерфейса в виде небольшого и упрощенного изображения, которое обозначает действие или объект. Они являются неотъемлемой частью дизайна интерфейса цифровых продуктов: сайтов, приложений и даже операционных систем.
Совет: перед тем как использовать те или иные иконки для рабочего макета, удостоверьтесь, что бесплатная лицензия также распространяется и на коммерческие проекты.
Зачем нужны иконки и какие они бывают
У иконок есть 4 основные функции:
- Навигация. Иконка может использоваться в качестве кнопки для перехода к определенному разделу сайта. Например, к настройкам, к домашней странице, к корзине в интернет-магазине.
- Структурирование информации. Контент на экране, как правило, делится на части для упрощения восприятия. Иконки подсказывают пользователю смысловое содержание этих частей.
- Экономия места. Текстовое описание функции, действия или объекта занимает больше места, чем небольшое содержательное изображение. Если вы хотите добавить визуальный простор дизайну вашего интернет-магазина, используйте значок с изображением продуктовой корзины, а не надпись «добавить товар в корзину».
- Обеспечение интуитивной понятности. Многие иконки имеют универсальное значение и понятны для пользователей разных культур и языков.
* Создание понятного интерфейса — одна из важнейших задач UX/UI-дизайнера. Обо всех его задачах читайте в нашей статье.
Форматы иконок
Иконки, как и любое другие изображения, бывают растровыми и векторными. Чаще всего предпочтение отдают векторным иконкам: их размер можно менять без потери качества и загружаются они быстрее. Растровые изображения в свою очередь позволяют сохранить высокое качество цветопередачи. К популярным векторным форматам относятся:
- SVG — универсальный формат для создания и масштабирования иконок
- AI — формат файлов, используемый в Adobe Illustrator.
К форматам, подходящим для редактирования растровых изображений, относятся:
- PNG — поддерживает высокое качество, если не нужно масштабировать картинку
- PSD — формат, который используется в Adobe Photoshop. Как и AI, PSD подходит для редактирования изображений и легко переформатируется в другой формат
- ICO — используется для создания иконок для приложений и сайтов под Windows.
Если выбирать из всех этих форматов, то предпочтение лучше отдать SVG, так как большинство разработчиков пользуются этим форматом, чтобы воплощать задумки дизайнеров в реальность.
ТОП-13 мест, где можно скачать иконки для своего проекта бесплатно
Иконки можно создавать самостоятельно, но использовать уже готовые изображения из открытых источников — нормальная практика среди дизайнеров.
При скачивании иконок из интернета, не забывайте об авторском праве. Свободно использовать в своих проектах можно лишь те изображения, которые бесплатно публикует для скачивания или продает сам правообладатель. А вот ресурсы, где можно найти такие иконки ↓
Figma
Чтобы скачать бесплатные иконки с Figma, вам нужно зайти в Community и вбить в поисковой строке «Free Icons». Получить изображения можно двумя способами:
- Скачать бесплатный плагин — мини-приложение, которое откроется прямо в вашем проекте и переносить иконки оттуда.
- Найти нужные картинки в бесплатном паке — отдельной странице, откуда вы можете скопировать все необходимые изображения.
* Больше узнать о Figma можно по этой ссылке.
Tilda Icons
На сайте Tilda есть более 700 минималистичных иконок в формате SVG доступных для скачивания. Они разбиты на 47 тематических сетов: образование, реклама, доставка, квесты, путешествия и так далее. Иконки можно использовать бесплатно в любых целях, но только с указанием авторства — Tilda Publishing.
Noun Project
На сайте представлены более 5 млн бесплатных иконок разных авторов и разных стилей. Картинки доступны для скачивания в форматах PNG и SVG. Некоторые изображения можно приобрести за деньги по $2.99 за штуку. А с ежемесячной подпиской за $3.33, можно использовать иконки без указания авторства и редактировать имеющиеся изображения прямо на сайте: менять их цвет и форму.
Просмотр платных иконок может помочь дизайнеру в поиске идей для создания собственных значков. Другие источники вдохновения для веб- и UX/UI-дизайнеров находятся здесь.
Flaticon
Более 15 млн бесплатных векторных статичных и анимированных иконок в формате PNG. Есть возможность выбирать по стилям: минимализм, плоский дизайн, градиенты, нарисованные от руки, 3D. Также пользователи могут бесплатно редактировать картинки прямо в браузере. Платная подписка позволит скачивать изображения в разных форматах.
Iconshock
Пользователям доступны 30 стилизованных наборов в числе которых специализированные паки иконок под различные операционные системы: Vista, iOS, Windows 7, XP.
* Обзор самых популярных ОС и рекомендации по их выбору ищите тут.
Все иконки можно скачать бесплатно, но только в формате PNG и только размером до 72 пикселей. Другие размеры, форматы, а также некоторые стили доступны только после платной подписки.
Orion
Библиотека предлагает более 3000 бесплатных иконок в формате SVG для веб-сайтов, мобильных приложений и прочих цифровых продуктов. На выбор предлагается 4 стиля: тонкие контуры, solid, разноцветные значки и flat design. Есть возможность преобразовывать изображения прямо в браузере: менять их стиль, цвет, делать их более угловатыми или, наоборот, гладкими.
PixelLove
15 000 иконок, разбитых на 6 стилей: тонкий контур, solid, монотонные, цветные, цветные с черным контуром и двухцветные. Для бесплатного пользования доступно 600 векторных изображений в различных форматах. Большим плюсом является наличие стилизованных под пиксельный стиль брендовых логотипов: YouTube, Skype, Pinterest и так далее.
Freepik
Для скачивания доступно 10 млн PNG и SVG иконок. Около 3 млн из них — бесплатны. Искать можно через строку поиска, введя нужную функцию или объект на английском языке, через стили или же просто просматривая огромную библиотеку изображений. На этом же сайте вы найдете бесплатные фото, видео и шрифты.
Icons8
На сайте представлено более миллиона иконок для iOS, Android, Windows, браузеров и графического дизайна. Icons8 предлагает огромное количество стилей: от пиксельного до мозаичного. Можно искать иконки по стилям, функциям и темам: музыка, шопинг, погода. Скачать одно изображение не выйдет, придется приобретать целый набор форматах SVG и PNG. Некоторые паки можно получить только по платной подписке за $15 в месяц.
iconmonstr
Более 300 коллекций содержат около 5000 черно-белых иконок в форматах SVG и PNG. Пользователи могут не только скачать картинку, но и просмотреть ее код. Это дает возможность быстро вставить иконку в проект в качестве встроенного svg или фавикона.
Favicon — картинка на вкладке браузера, которая отображается рядом с названием страницы и в результатах большинства поисковиков. Как правило, это уменьшенная версия логотипа веб-сайта.
Pixeden
На этом ресурсе можно найти множество полезных бесплатных материалов для дизайнеров: иконки, фоны, шаблоны для верстки веб-сайтов. Бесплатных наборов иконок всего 28, но они очень разнообразны по стилистике. Платные наборы можно приобрести по подписке стоимостью в $9 в месяц.
Icon Kitchen
Icon Kitchen — редактор для создания простых иконок для iOS, Android и веб-сайтов. Сайт предлагает более сотни стандартных изображений: часы, снежинка, диалоговое окно, стрелки, галочки и так далее. Пользователь может выбрать нужную иконку, поменять ее цвет и добавить эффект. Также есть возможность создавать картинки на основе текста или фотографии. Полученные изображения можно скачать бесплатно в формате PNG.
* Icon Kitchen может не загружаться без VPN.
Tabler Icons
Еще один бесплатный редактор. Для взаимодействия доступны 4926 иконок. Менять можно не только цвет, но и размер иконок и толщину линий. Цвета выбираются из базовой палитры или с помощью цветового кода. Нужную картинку можно найти через поисковую строку, введя необходимую функцию или объект.
И напоследок: в нашем буткемпе по UX/UI дизайну, кроме того, что вы выстроите правильный карьерный путь и получите все необходимые для UX/UI дизайнера знания, вы научитесь правильно подбирать стиль иконок под проект, работать с ними, учиться их модифицировать под себя. Кстати, создавать иконки можно не только с помощью специализированных редакторов, но и с помощью нейросетей для создания картинок. Как работать с нейросетями правильно, вы также узнаете во время обучения.
