Акцентная иконка
Акцентная иконка ставит иконку на цветную
подложку и выделяет тему карточки, раздела, статуса или пустого состояния.
Берите её, когда иконка открывает блок содержимого; иконка внутри строки
текста или кнопки подложки не требует.
Пример
rocket_launch
Быстрый старт
Подключите Framework и соберите первую страницу.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex items-start gap-2" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--primary" aria-hidden ="true" ><i class ="sf-icon" aria-hidden ="true" >rocket_launch</i ></span >
<div class ="flex flex-col" >
<strong >Быстрый старт</strong >
<span class ="color-on-surface-variant" >Подключите Framework и соберите первую страницу.</span >
</div >
</div >
Разметка
Минимальную разметку показывает пример выше: <span class="sf-featured-icon">
с иконкой <i class="sf-icon"> внутри.
Без модификаторов подложка круглая, мягкого тона, основного цвета и
размера 1; модификаторы меняют каждую ось отдельно.
Размер и цвет иконки задаёт подложка: классы размера на sf-icon не
нужны.
Варианты
Интенсивность
sf-featured-icon--soft — мягкий тон по умолчанию, для большинства карточек;
sf-featured-icon--medium — тон насыщеннее; sf-featured-icon--solid —
полная заливка цветом роли, для одного главного акцента;
sf-featured-icon--elevated — нейтральная подложка с тенью и иконкой цвета
роли. Имена light, mid, dark и modern работают так же, как soft,
medium, solid и elevated; в разметке пишите вторые.
star sf-featured-icon--soft
star sf-featured-icon--medium
star sf-featured-icon--solid
star sf-featured-icon--elevated
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--soft</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--medium sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--medium</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--solid sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--solid</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--elevated sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--elevated</code >
</div >
</div >
Цвет
Цвет задаёт роль: primary — тема продукта, neutral — нейтральный
раздел, info, success, warning и error — статусы. Имя clear
работает так же, как neutral.
star sf-featured-icon--primary
folder sf-featured-icon--neutral
info sf-featured-icon--info
check_circle sf-featured-icon--success
warning sf-featured-icon--warning
error sf-featured-icon--error
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--primary</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--neutral" ><i class ="sf-icon" aria-hidden ="true" >folder</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--neutral</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--info" ><i class ="sf-icon" aria-hidden ="true" >info</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--info</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--success" ><i class ="sf-icon" aria-hidden ="true" >check_circle</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--success</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--warning" ><i class ="sf-icon" aria-hidden ="true" >warning</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--warning</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--error" ><i class ="sf-icon" aria-hidden ="true" >error</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--error</code >
</div >
</div >
Форма
sf-featured-icon--circle — круг, форма по умолчанию.
sf-featured-icon--square скругляет углы радиусом, согласованным с
размером, и подходит карточкам с прямыми углами.
star sf-featured-icon--circle
star sf-featured-icon--square
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--primary sf-featured-icon--circle" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--circle</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--primary sf-featured-icon--square" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--square</code >
</div >
</div >
Размер
Размеры 1/3, 1/2, 1, 2 и 3 согласованно меняют отступ подложки,
иконку и радиус квадратной формы. Берите ступень заголовка, рядом с которым
стоит иконка.
star sf-featured-icon--size-1/3
star sf-featured-icon--size-1/2
star sf-featured-icon--size-1
star sf-featured-icon--size-2
star sf-featured-icon--size-3
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-1/3 sf-featured-icon--soft sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--size-1/3</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-1/2 sf-featured-icon--soft sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--size-1/2</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-1 sf-featured-icon--soft sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--size-1</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-2 sf-featured-icon--soft sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--size-2</code >
</div >
<div class ="flex flex-col gap-1 items-center" >
<span class ="sf-featured-icon sf-featured-icon--size-3 sf-featured-icon--soft sf-featured-icon--primary" ><i class ="sf-icon" aria-hidden ="true" >star</i ></span >
<code class ="text-1/2 color-on-surface-variant" >sf-featured-icon--size-3</code >
</div >
</div >
Доступность
Если смысл передаёт соседний текст, скройте подложку целиком:
aria-hidden="true".
Самостоятельная значимая иконка получает role="img" и короткое имя
через aria-label; сама sf-icon внутри остаётся скрытой.
Статус не передавайте только цветом: подпись или текст рядом обязательны.
В режиме высокой контрастности подложка становится системным фоном с
рамкой цвета текста.
check_circle Оплата прошла — иконка декоративная, смысл передаёт текст.
info Самостоятельная иконка получает роль и имя.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-2" >
<p class ="flex items-center gap-1 m-0" >
<span class ="sf-featured-icon sf-featured-icon--size-1/2 sf-featured-icon--soft sf-featured-icon--success" aria-hidden ="true" ><i class ="sf-icon" aria-hidden ="true" >check_circle</i ></span >
<span >Оплата прошла — иконка декоративная, смысл передаёт текст.</span >
</p >
<p class ="flex items-center gap-1 m-0" >
<span class ="sf-featured-icon sf-featured-icon--size-1/2 sf-featured-icon--soft sf-featured-icon--info" role ="img" aria-label ="Информация" ><i class ="sf-icon" aria-hidden ="true" >info</i ></span >
<span >Самостоятельная иконка получает роль и имя.</span >
</p >
</div >
Классы
Что
Классы
Блок
sf-featured-icon
Модификаторы
sf-featured-icon--circle, sf-featured-icon--clear, sf-featured-icon--dark, sf-featured-icon--elevated, sf-featured-icon--error, sf-featured-icon--info, sf-featured-icon--light, sf-featured-icon--medium, sf-featured-icon--mid, sf-featured-icon--modern, sf-featured-icon--neutral, sf-featured-icon--primary, sf-featured-icon--soft, sf-featured-icon--solid, sf-featured-icon--square, sf-featured-icon--success, sf-featured-icon--warning
Размеры
sf-featured-icon--size-1, sf-featured-icon--size-1/2, sf-featured-icon--size-1/3, sf-featured-icon--size-2, sf-featured-icon--size-3
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента ). Значение по умолчанию — из базового правила блока (.sf-featured-icon); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-featured-icon--background-colorvar(--sf-featured-icon--container)background-color
--sf-featured-icon--box-shadownonebox-shadow
--sf-featured-icon--containervar(--sf-primary-container)--sf-featured-icon--background-color, border
--sf-featured-icon--container-strongvar(--sf-primary-container-hover)--sf-featured-icon--background-color
--sf-featured-icon--foreground-colorvar(--sf-featured-icon--on-container)--sf-icon--color
--sf-featured-icon--icon-sizevar(--sf-text-height-1)--sf-icon--font-size, --sf-icon--height, --sf-icon--width
--sf-featured-icon--on-containervar(--sf-on-primary-container)--sf-featured-icon--foreground-color
--sf-featured-icon--on-tonevar(--sf-on-primary)--sf-featured-icon--foreground-color
--sf-featured-icon--paddingvar(--sf-ui-1--space-y-tightness-default)padding
--sf-featured-icon--radiusvar(--sf-radius-circle)border-radius
--sf-featured-icon--square-radiusvar(--sf-radius-1)--sf-featured-icon--radius
--sf-featured-icon--tonevar(--sf-primary)--sf-featured-icon--background-color, --sf-featured-icon--foreground-color
См. также
Предыдущая Клавиши Следующая Теги
