Линейные (минималистичные) иконки — скачать PNG и SVG бесплатно
Линейные иконки нарисованы одной обводкой без заливки: сетка 24×24, линия 1,5 px, скруглённые концы и углы.
Контурный стиль (outline) — основа современных интерфейсов: такие пиктограммы не спорят с текстом и одинаково аккуратно смотрятся в меню, формах и мобильных приложениях. Все линейные иконки монохромные — цвет выбирается прямо на странице, а скачать их можно в SVG, PNG, WebP и ICO.
Что такое линейные иконки
Линейная иконка передаёт предмет только контуром — без заливки, теней и полутонов. У всех линейных иконок каталога общая геометрия: сетка 24×24, обводка 1,5 px, скруглённые концы и соединения, поле 2 px от края. Ключевые формы подобраны под единый оптический размер, поэтому пиктограммы из разных наборов стоят в строке ровно.
Цвет в SVG задан через currentColor — иконка наследует цвет текста. На странице иконки есть палитра из 12 цветов и поле HEX, а код копируется как SVG или React-компонент.
Когда выбирать контурный стиль
Контурные иконки — выбор по умолчанию для интерфейса: меню, панели инструментов, формы, личные кабинеты. Они визуально лёгкие и не перетягивают внимание с контента. Чаще всего в этом стиле берут иконки интерфейса и стрелки для навигации, а сервисам с документами нужны пиктограммы файлов и папок.
Стиль уместен и в деловых презентациях, инструкциях, документации: тонкий штрих выглядит строго и хорошо печатается.
Линейные, залитые или двухцветные
У линейного стиля два ближайших соседа. Иконки с заливкой тяжелее и заметнее; их силуэт совпадает с внешним краем обводки, поэтому пара «контур — заливка» удобна для состояний: обычная вкладка контурная, активная залитая. Двухцветные иконки строятся из тех же линейных исходников и добавляют полупрозрачную заливку — они выразительнее на крупных размерах, но в плотных списках выглядят шумно. Плоские и 3D-иконки для кнопок и полей ввода слишком тяжёлые.
Где использовать линейные иконки
| Где использовать | Размер | Почему подходит |
|---|---|---|
| Меню и панели инструментов | 20–24 px | Не спорят с подписями, читаются с первого взгляда |
| Формы и поля ввода | 16–20 px | Подсказывают тип поля, не утяжеляя форму |
| Карточки и списки преимуществ | 32–48 px | Строгий вид, легко перекрасить в фирменный цвет |
| Презентации и инструкции | 48–128 px | Чисто выглядят и на экране, и на бумаге |
Практические советы
- Размеры. Самая чёткая линия получается в 16, 32 и 48 px, где её толщина равна целому числу пикселей. Не растягивайте маленький PNG — скачайте нужный размер или используйте SVG.
- Контраст. Тонкой линии нужен контраст выше, чем залитой фигуре: для значимых иконок держите не меньше 3:1 к фону и не ставьте светло-серые контуры на серую подложку.
- Доступность. Декоративной иконке рядом с текстом добавьте
aria-hidden="true", а кнопке из одной иконки —aria-labelс понятным действием. - Производительность. Исходник линейной иконки весит до 4 КБ. Если на странице десятки иконок, объедините их сборщиком SVG-спрайта: один файл вместо десятков запросов.
Готовые подборки в этом стиле: набор «Интерфейс UI» для кнопок и навигации, «Бизнес и финансы» для отчётов и лендингов, «Связь и почта» для контактов и уведомлений. Сервисам с авторизацией пригодятся иконки безопасности, а сайтам с записью и бронированием — время и календарь.
Категории
- Интерфейс 38
- Стрелки 43
- Социальные сети 21
- Бизнес и финансы 38
- Еда и напитки 30
- Транспорт 24
- Погода 27
- Медицина 24
- Образование 25
- Спорт 24
- Музыка и медиа 32
- Устройства и техника 37
- Файлы и документы 32
- Безопасность 26
- Связь и почта 31
- Путешествия 24
- Дом и быт 24
- Природа и животные 24
- Покупки 27
- Люди и аватары 23
- Время и календарь 18
- Карты и локации 23
- Наука 20
- Праздники 21
Популярные наборы
Все наборы →
Частые вопросы
- Линейные, контурные и outline-иконки — это одно и то же?
- Да, это названия одного стиля, в котором предмет изображён линией без заливки. На сайте такие иконки отмечены стилем «Линейный», а их сплошные версии собраны на странице иконок с заливкой.
- Какой размер линейной иконки выбрать?
- Для меню и кнопок обычно берут 20–24 px, для карточек и списков — 32–48 px. Линия масштабируется вместе с рисунком: при 16 px её толщина ровно 1 px, при 32 px — 2 px, при 48 px — 3 px.
- Как поменять цвет линейной иконки?
- На странице иконки выберите один из 12 цветов палитры или введите HEX. В SVG обводка задана через currentColor, поэтому на сайте иконка сама берёт цвет из CSS-свойства color родительского элемента.
- Можно ли использовать линейные иконки в коммерческих проектах?
- Да, бесплатно и без указания авторства — в сайтах, приложениях, презентациях и рекламе. Нельзя только перепродавать иконки и наборы как есть или выдавать их за свои.