Icon

Icon ставит иконку самостоятельно: значок «скрыто» у превью, предупреждение в тексте строки, знак в ячейке таблицы. Имя берётся из каталога практики icons — весь набор Phosphor, размер — из шкалы --icon-*, цвет — от текста вокруг.

Статус: experimental · в системе с 2026-08 · интерактивность: none (нет)

Когда использовать

Значок состояния объекта там, где кнопки нет: «скрыто» у превью креатива, ошибка в строке выдачи.
Знак рядом с текстом или полем, который помогает прочитать подпись: предупреждение, справка, внешняя ссылка.
Знак в ячейке таблицы вместо слова, когда колонка узкая, а значение бинарное.

Не использовать:

Иконка — часть действия: у Button и Toggle Button есть проп icon по тому же словарю.
Иконка означает состояние, которое нужно назвать словом, — это Status.
Нужен знак вне набора Phosphor: логотип, картинка, произвольный глиф — набор один, картинка не иконка.

Альтернативы:

button — иконка внутри действия — проп icon или короткая кнопка
status — состояние сущности со значком и подписью

Словарь

Все имена словаря канона с подписями.

Check X Plus MagnifyingGlass CaretDown PencilSimple Trash Gear Info Warning ArrowsClockwise Funnel DotsThree ArrowSquareOut Eye EyeSlash PushPin ArrowsDownUp Copy Question

<!--
  🟢

  Частые имена словаря: каждое имя из витрины практики icons.catalog
  рендерится через Icon, подпись под глифом — само имя. Словарь шире витрины —
  проп name принимает любое имя каталога `/icons.json`.
-->

<script>
import { icons } from "$lib/spec/data/practices.js";
import Icon from "$lib/ui/Icon.svelte";
</script>

<div
	style="display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--sp-8), 1fr)); gap: var(--sp-2); width: 100%; font-size: var(--fs-xs);"
>
	{#each icons.catalog.featured as name (name)}
		<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-0-5);">
			<Icon {name} size="m" />
			<code>{name}</code>
		</span>
	{/each}
</div>

Размеры

Четыре ступени шкалы на одной иконке.

xs s m l

<!--
  🟢

  Четыре ступени шкалы --icon-* на одной иконке: xs 10, s 14, m 20, l 24.
  Размер задаёт токен, поэтому ступени одинаковы во всех скинах.
-->

<script>
import Icon from "$lib/ui/Icon.svelte";

const sizes = ["xs", "s", "m", "l"];
</script>

<div style="display: flex; align-items: flex-end; gap: var(--sp-3); font-size: var(--fs-xs);">
	{#each sizes as size (size)}
		<span style="display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-0-5);">
			<Icon name="MagnifyingGlass" {size} />
			<code>{size}</code>
		</span>
	{/each}
</div>

В строке

Иконка перед текстом и знак внутри строки выдачи; цвет наследуется от текста.

Показы считаются раз в час Креатив 128 лимит

<!--
  🟢

  Icon в строке: значок перед текстом наследует его цвет, а внутри строки
  выдачи стоит как знак состояния — «скрыто» у превью и предупреждение у
  значения. Знак без подписи получает label.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Icon from "$lib/ui/Icon.svelte";
</script>

<div style="display: grid; gap: var(--sp-2); font-size: var(--fs-s);">
	<span style="display: inline-flex; align-items: center; gap: var(--sp-1);">
		<Icon name="Info" />
		{t("Показы считаются раз в час")}
	</span>
	<span style="display: inline-flex; align-items: center; gap: var(--sp-2);">
		<Icon name="EyeSlash" size="m" label={t("Скрыто")} />
		<span>{t("Креатив 128")}</span>
		<span style="display: inline-flex; align-items: center; gap: var(--sp-0-5); color: var(--c-warning);">
			<Icon name="Warning" size="xs" />
			{t("лимит")}
		</span>
	</span>
</div>