Коротко: размер иконки в CSS меняют по-разному в зависимости от типа: у SVG — через width/height (или width: 1em для выравнивания с текстом), у шрифтовых иконок — через font-size, у картинки — обычными width/height. Для единообразия удобно задать размер через переменную.
Тип иконки определяет способ
| Тип | Как менять размер |
|---|---|
| Инлайн SVG | width, height |
| SVG для текста | width: 1em; height: 1em |
| Шрифтовая иконка | font-size |
Картинка (img) |
width/height |
| Маска | width/height у блока |
Вкладки: примеры
.icon {
width: 24px;
height: 24px;
}
.icon--lg { width: 32px; height: 32px; }Задайте оба размера, иначе иконка может «схлопнуться» или растянуться. У SVG с viewBox пропорции сохранятся.
.icon-inline {
width: 1em;
height: 1em;
vertical-align: -0.125em; /* аккуратное выравнивание */
}Размер в em привязан к размеру шрифта: иконка автоматически подстроится под текст, где бы он ни был крупнее или мельче.
.icon-font { font-size: 20px; }
.icon-font--sm { font-size: 14px; }У шрифтовых иконок размер задаёт font-size — как у обычного текста. Цвет — обычным color.
.icon-img {
width: 24px;
height: 24px;
object-fit: contain;
}Для картинки задают размеры и object-fit, чтобы не искажалась. Если картинка «Retina» — задавайте половину её исходного размера.
--icon-sm: 16px, --icon: 24px, --icon-lg: 32px. Тогда все иконки на сайте будут согласованы, а менять размер — в одном месте.Практика: иконка рядом с текстом
- Разместите иконку и текст в flex-строке.
- Иконке задайте
width: 1em; height: 1em; flex-shrink: 0;. - Проверьте выравнивание по вертикали (
align-items: center). - Отступ между иконкой и текстом —
gap. - Проверьте, как выглядит при увеличении размера шрифта в браузере.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Иконка растянута | задан только один размер | задать width и height |
| Иконка «прыгает» по высоте | нет vertical-align |
flex или vertical-align |
| Шрифтовая не меняется | меняли width вместо font-size | задать font-size |
| Иконка сжимается в строке | flex-shrink по умолчанию | flex-shrink: 0 |
Проверьте себя
width: 1em?
Вопросы и ответы
Без заданных width/height и при отсутствии размеров во вьюбоксе он может схлопнуться до нуля. Задайте размеры в CSS.
Через медиа-запрос или clamp(). Но обычно иконки не масштабируют — контролируют «кликабельную зону» (48×48px), а не сам глиф.
Лучше всего flex: контейнер display: flex; align-items: center; и gap между элементами.
Да: .icon { width: var(--icon); height: var(--icon); } и задавать разные переменные для контекстов.
Итоги
- SVG — размер через
width/height, шрифтовые — черезfont-size. - Рядом с текстом удобно
width: 1em; height: 1em. - Задавайте оба размера, чтобы иконка не искажалась.
- Используйте шкалу размеров и
flex-shrink: 0в строке.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.