Иконки стрелок — скачать PNG и SVG бесплатно
Стрелки направляют взгляд и подсказывают действие: пролистать карусель, раскрыть список, вернуться назад, обновить данные, показать рост показателя.
Об иконках стрелок
В разделе собраны иконки стрелок всех основных форм — прямые и диагональные, в круге, двойные шевроны, треугольники сортировки, круговые стрелки повтора и синхронизации. Основной стиль — линейный; шевроны, отмену и повтор можно взять и в двухцветном варианте.
Какая стрелка для чего
Иконки стрелок кажутся самыми простыми знаками, но у каждой формы свой смысл, и пользователь считывает его автоматически. Перепутанные формы делают интерфейс чуть-чуть «не таким»: уголок-шеврон в кнопке оплаты выглядит несерьёзно, а длинная стрелка в выпадающем списке — странно.
| Форма | Где уместна |
|---|---|
| Шеврон | выпадающие списки, аккордеоны, карусели, хлебные крошки |
| Треугольник | сортировка столбцов, компактные селекты |
| Стрелка с древком | «Далее» и «Назад», шаги мастера, ссылки-призывы |
| Стрелка в круге | крупные кнопки слайдеров, промоблоки |
| Круговые стрелки | обновление, синхронизация, повтор |
Направление несёт смысл
Стрелку вправо читают как «вперёд» только при письме слева направо — в арабской локализации или на иврите её отражают. Диагональная стрелка вверх-вправо стала привычным знаком внешней ссылки, шеврон вниз — знаком раскрытия, а треугольник — сортировки. Для слайдера на лендинге подойдёт стрелка в круге. Пара «Рост» и «Падение» уместна в дашбордах, но цвет здесь только помощник: направление должно читаться и без зелёного с красным.
Вес линии рядом с текстом
Стрелочные иконки чаще других стоят вплотную к тексту, поэтому их вес должен совпадать с весом шрифта. Линия 1,5 px на сетке 24×24 близка к обычному начертанию; для полужирной кнопки возьмите иконку крупнее, а не толще. Выравнивайте стрелку по оптическому центру строчных букв, а не по базовой линии.
Больше всего иконок стрелок — в наборе «Стрелки». Шевроны, обновление и отмена действия входят в набор «Интерфейс UI», а их двухцветные варианты — в «Интерфейсе UI Duotone».
Наборы по теме
Все наборы →
Частые вопросы
- Чем шеврон отличается от стрелки и что ставить в кнопку «Далее»?
- Шеврон — уголок без древка — обычно означает раскрытие или перемещение внутри компонента: списка, аккордеона, карусели. Стрелка с древком сильнее передаёт движение к следующему шагу, поэтому её чаще ставят в кнопки «Далее» и «Назад».
- Как получить стрелку под нужным углом?
- Для каждого из восьми направлений в каталоге есть отдельная иконка, так что поворачивать обычно ничего не нужно. Для нестандартного угла поверните SVG через CSS-свойство transform — чёткость при этом не пострадает.
- Как показать рост и падение показателя, чтобы это поняли все?
- Используйте иконки «Рост» и «Падение» вместе с числом и знаком плюс или минус. Цвет помогает, но часть людей плохо различает красный и зелёный, поэтому смысл должен читаться по направлению стрелки и подписи.