Components / Foundations

Icon

Component + manager

Renders an inline svg icon from a fixed set of icon_ids, with optional color, rotation, and animation.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentIcon

Managercreate_icon_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Icon, create_icon_manager } from "sveltekit-ui"

  const manager = create_icon_manager({
    icon_id: "check",
    color: "var(--success-t)",
    size: 2.4,
    sw: 40,
  })
</script>

<div style="display: flex; align-items: center; gap: 1rem;">
  <Icon {manager} /><span>Ready to publish</span>
</div>

API reference

Configure the manager, call its methods, and read its reactive state.

17 entries in configuration

Property	Type	Default	Description
`icon_id`	`string`	`null`	identifies the icon to render (e.g. 'arrow', 'check', 'trashcan').
`deg`	`number`	`0`	icon rotation in degrees
`color`	`string`	`var(--g4-t)`	stroke color for the icon; also colors filled details such as dots
`color_alt`	`string`	`var(--g12-t)`	alternate color (used in certain icons like 'sort' for ascending vs. descending). if not used, it falls back to the main color
`fill`	`string`	`none`	svg fill color (e.g., 'none' or a color hex)
`size`	`number`	`2`	icon size in rem
`sw`	`number`	`60`	stroke width setting for the icon; three_dots and drag_grip use circles with radius sw / 2 + 6
`ml`	`number`	`0`	margin-left in rem
`mr`	`number`	`0`	margin-right in rem
`mt`	`number`	`0`	margin-top in rem
`mb`	`number`	`0`	margin-bottom in rem
`sort_state`	`string`	`null`	used by the 'sort' icon to highlight ascending or descending arrow: 'asc', 'desc', or null
`is_shimmy_infinite`	`boolean`	`false`	if true, the icon keeps rotating slightly (shimmy) forever
`is_shimmyable`	`boolean`	`false`	if true, icon can be triggered to shimmy for 1s with trigger_shimmy()
`movement_stiffness`	`number`	`0.1`	reserved for future motion config (svelte spring or similar)
`movement_damping`	`number`	`0.1`	reserved for future motion config (svelte spring or similar)
`id`	`string`	`null`	unique id for the icon. if not provided, a random id is generated