24 иконки в PSD формате для Фотошоп

Что внутри набора: 24 круглые PSD иконки

Архив весит всего 491,66 КБ, а разрешение исходника — 800×600 px. Каждая иконка выполнена в круглом контейнере, что сразу задаёт стиль: минималистично, современно, единообразно. Фон у превью тёмный, но в самом PSD подложка отсутствует — вы получаете чистые векторные формы, которые легко вписать в любой интерфейс.

+

\u{201c}

Дизайн — это не только то, как выглядит, но и то, как работает. Иконки в интерфейсе — это не украшение, а инструмент навигации.

Какие иконки входят в набор

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

• Дом — для главной страницы или раздела «На главную». Это одна из самых узнаваемых иконок в мире, её не нужно подписывать;
• Корзина — для удаления контента или, в паре с тележкой, для интернет-магазина;
• Поиск — лупа для строки поиска. Стандарт де-факто, альтернатив нет;
• Шестерёнка — настройки и конфигурация профиля. Если сайт сложный, без неё не обойтись;
• Конверт — обратная связь, почта, подписка на рассылку;
• Корзина покупок — тележка для интернет-магазина, показывающая количество товаров;
• Карандаш — редактирование записи, профиля, комментария;
• Звезда — избранное, рейтинг, оценка контента;
• Лайк (сердце) — реакции, добавление в избранное, социальное взаимодействие;
• Часы — история просмотров, недавние действия, время публикации;
• Человек — профиль пользователя, авторизация, личный кабинет;
• Уведомление — колокольчик, система оповещений и алертов;
• Стрелка вправо/влево — слайдеры, переключение шагов, навигация назад/вперёд;
• Плюс/минус — добавление или удаление элементов, раскрытие списков;
• Галочка — подтверждение действия, успешное завершение, выбор опции;
• Крестик — закрытие модальных окон, отмена действия, удаление тега;
• Облако — облачное хранилище, синхронизация, загрузка файлов;
• Фотоаппарат — камера, загрузка фото, смена аватара;
• Видеокамера — видео, запись, видеозвонок;
• Музыкальная нота — аудио, плеер, подкасты;
• Телефон — контакты, обратный звонок, поддержка;
• Флаг — метка, выбор языка, достижение в геймификации;
• Инфо — справка, информация, подсказка;
• Вопрос — помощь, служба поддержки, раздел FAQ.

Я советую сразу после скачивания переименовать слои на русский или английский под свои нужды — в больших проектах это экономит часы. В слоях также сохранены оригинальные эффекты: тень, обводка, градиент. Если вам нужны плоские иконки в стиле Material Design, просто снимите галочку с эффекта тени.

Форматы и совместимость

PSD-файл — это исходник. Из него вы можете получить любой производный формат. Ниже таблица совместимости:

Набор отлично работает в Photoshop CS6, CC, 2024, 2025, 2026. Можно открыть в GIMP или Photopea — бесплатных аналогах, которые поддерживают PSD. Но есть нюанс: GIMP не всегда корректно читает слоевые эффекты Photoshop. Если важна точность каждой тени — работайте в оригинальном Фотошопе.

Для веба я рекомендую экспортировать иконки в WebP или SVG. WebP даёт меньший размер при том же качестве по сравнению с PNG. SVG — вообще вектор, он не теряет чёткости на retina-экранах. Если ваш проект использует CSS-спрайты, склейте иконки в один PNG-спрайт через любой спрайт-генератор.

Сравнение: готовые PSD-иконки vs популярные альтернативы

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

Лично я предпочитаю PSD-наборы для черновой работы: накидал макет, покрутил цвета, показал клиенту. Когда макет утверждён — конвертирую нужные иконки в SVG и передаю верстальщику. Один файл вместо 24 отдельных — это удобно.

Как использовать PSD-иконки в веб-дизайне

1. Интерфейсы и кнопки навигации

Круглые иконки отлично смотрятся в кнопках навигации и панелях инструментов. Благодаря единой форме они создают ритм: глаз пользователя скользит по строке и легко находит нужную функцию. Экспортируйте нужную иконку в PNG-24 или конвертируйте в SVG.

1. Открыть PSD → выбрать слой с иконкой 2. Скрыть фоновые слои (выкл. глаз) 3. File → Export → Export As → PNG-24 или SVG 4. Выставить размер 5. Сохранить

Совет: не экспортируйте сразу все 24 иконки. Берите только те, что реально используются в макете. Лишние файлы засоряют папку assets и сбивают с толку разработчика.

2. Мобильные приложения

Для мобильных интерфейсов используйте размер 48×48 dp — это рекомендованный Google Material Design минимальный размер для touch-целей. Базовое разрешение 800×600 px позволяет масштабировать иконки без потери чёткости до 150×150 px. Если нужно меньше — лучше экспортировать в SVG.

Ctrl + Shift + S — сохранить копию выбранной иконки как PNG в Photoshop. Используйте этот шорткат, чтобы не перезаписывать оригинальный PSD.

3. Favicon и браузерные иконки

Из круглой иконки легко сделать favicon. Экспортируйте квадратную версию 256×256 px, а затем сконвертируйте в ICO через favicon.io или ConvertICO. Учитывайте, что браузеры показывают favicon по-разному: Chrome берёт 192×192 для вкладок, Safari — 16×16 для закладок. Лучше подготовить несколько размеров.

4. Презентации и соцсети

Вставьте иконку в Canva, PowerPoint или Keynote как PNG на прозрачном фоне. Единый круглый стиль придаёт презентации профессиональный вид. Я часто использую такие иконки в слайдах для заказчиков — это выглядит аккуратнее, чем стандартные картинки Microsoft.

5. Печатная продукция

Если готовите буклет или визитку — переведите PSD в CMYK перед печатью. Зайдите в Edit → Convert to Profile и выберите Coated FOGRA39. Без этого шага цвета на бумаге будут отличаться от того, что вы видите на мониторе.

Принципы работы с иконками в интерфейсе

Выравнивание и отступы

Иконки должны быть выровнены по пиксельной сетке. В Photoshop включите View → Snap to Grid и настройте шаг сетки на 1 px. Круглые иконки визуально кажутся меньше квадратных, поэтому давайте им чуть больше отступов — 6–10 px вместо стандартных 4 px. На мобильных устройствах отступ должен быть не менее 8 px, чтобы пользователь не промахивался пальцем.

Цвет и контраст

Используйте 2–3 цвета для всех иконок в интерфейсе: основной (акцентный, обычно цвет бренда), нейтральный (серый или тёмно-серый для пассивных элементов) и цвет состояния (зелёный для успеха, красный для ошибки). Не делайте каждую иконку разноцветной — это визуальный шум. Пользователь должен считывать иконку по форме, а не по цвету.

\u{201c}

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

Размер и вес

Подбирайте размер под контекст. У меня есть проверенная сетка:

• 16×16 px — мелкие элементы, теги, статусы, бейджи;
• 24×24 px — панели инструментов, иконки в таблицах;
• 32×32 px — кнопки навигации, социальные ссылки;
• 48×48 px — мобильные иконки главного меню;
• 64×64 px — крупные кнопки, промо-блоки, преимущества.

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

Консистентность стиля

Этот набор уже единообразен: все иконки круглые, с одинаковой толщиной обводки, одинаковым радиусом скругления и похожей стилизацией. Если вы добавляете свои иконки — придерживайтесь тех же параметров. Скопируйте Layer Style с существующей иконки через правый клик → Copy Layer Style, затем вставьте на новый слой. Так вы сохраните визуальное единство.

Оптимизация иконок для скорости загрузки

Размер иконок напрямую влияет на производительность сайта. Даже 24 небольших PNG могут добавить несколько сотен килобайт к странице, если не оптимизировать. Вот несколько проверенных способов держать вес под контролем. Первый — используйте SVG вместо PNG везде, где это возможно. SVG весит в разы меньше, не теряет качества при масштабировании и поддерживает CSS-стилизацию. Файл размером 1–2 КБ вместо 15–20 КБ — разница очевидна. Второй — если проект на WordPress, установите плагин сжатия изображений типа Smush или ShortPixel. Они автоматически сжимают PNG и WebP без потери видимого качества. Третий способ — объедините иконки в спрайт. Это уменьшает количество HTTP-запросов с 24 до 1. В современных проектах с HTTP/2 это не так критично, но всё ещё даёт небольшой прирост скорости на слабых каналах, особенно на мобильных устройствах с медленным 3G.

[/codeblock]

Пример выше показывает, как подключить иконку из SVG-спрайта в HTML. Разметка минимальная, файл кешируется браузером, при повторных визитах страница грузится мгновенно. Для этого нужно сконвертировать PSD-иконки в SVG, собрать их в один спрайт через инструмент вроде SVG Sprite Generator или Iconfu. Процесс несложный: выгружаете каждую иконку как SVG, склеиваете их в один файл с тегами symbol, подключаете в разметке. На выходе имеете один HTTP-запрос вместо 24. Бонус: иконки можно красить через CSS — добавил fill="currentColor" и готово.

Ещё один важный момент — атрибут loading="lazy" для изображений. Если вы экспортируете иконки как PNG и размещаете их через тег img, добавьте lazy loading. Браузер загрузит иконки только тогда, когда они появятся в зоне видимости. Это особенно актуально для длинных страниц с большим количеством интерфейсных элементов. Для SVG этот фокус не нужен — они встраиваются в DOM и загружаются синхронно с разметкой.

Типичные ошибки при работе с PSD-иконками

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

Ошибка 1: растрирование векторного слоя. Сделали merge layers или применили фильтр — и иконка перестала масштабироваться без потерь. Всегда сохраняйте копию оригинального векторного слоя перед любыми необратимыми операциями. Используйте смарт-объекты, если планируете трансформации.

Ошибка 2: игнорирование альфа-канала при экспорте. Если сохранить иконку как JPG вместо PNG, появится белый прямоугольный фон. Выглядит непрофессионально, в интерфейс такую иконку не вставить. Всегда проверяйте формат в диалоге экспорта: нужен PNG-24 или PNG-8 с прозрачностью.

Ошибка 3: несоответствие размера. Дизайнер нарисовал иконку 32 px, а разработчик вставил её в блок 48 px. Иконка смотрится мелко, плавает в контейнере и теряется. Согласовывайте сетку размеров с командой на старте проекта. Запишите в гайдлайны: навигационные иконки — 32 px, иконки в контенте — 24 px, мобильные — 48 px.

Ошибка 4: избыточное количество цветов. Если каждая иконка в наборе покрашена в свой цвет, интерфейс превращается в новогоднюю ёлку. Это утомляет глаза и снижает читаемость. Ограничьте палитру тремя цветами, как я писал выше. Красная иконка должна означать только ошибку или удаление.

Ошибка 5: отказ от текстовых подписей. Есть миф, что иконки настолько универсальны, что подписи не нужны. На практике это не так. Иконка «галочка» может означать «сохранено», «выбрано», «подтверждено» или «установлено». Проверяйте свои макеты на случайных людях: если они не понимают значение за полсекунды — добавляйте подпись. A11y-специалисты скажут вам спасибо.

Как скачать и установить иконки

↓Скачать 24 PSD иконки491 КБ

Что такое Color Overlay?Color Overlay — это эффект слоя в Photoshop, который заменяет исходный цвет заливки на выбранный без потери текстур, теней и градиентов

Если вы работаете в Figma — импортируйте PSD через плагин PSD Importer. Figma не нативно открывает PSD, но плагин справляется с простыми файлами. Учтите, что слоевые эффекты могут сброситься — придётся настраивать цвета заново. Для больших проектов я рекомендую держать PSD-исходник в Photoshop, а в Figma загружать уже готовые PNG или SVG.

Часто задаваемые вопросы