Icon

Icons

SIX UI Library supports Material Icons and Symbols. Browse: Material Icons · Material Symbols.

Material Icons (legacy)

Outlined

pie_chartsettingssick

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon>pie_chart</six-icon>
  <six-icon>settings</six-icon>
  <six-icon>sick</six-icon>
  <six-icon name="fort"></six-icon>
  <six-icon name="castle"></six-icon>
</div>

Filled

pie_chartsettingssickfortcastle

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon filled>pie_chart</six-icon>
  <six-icon filled>settings</six-icon>
  <six-icon filled>sick</six-icon>
  <six-icon filled>fort</six-icon>
  <six-icon filled>castle</six-icon>
</div>

Material Symbols (new)

Outlined

homesettingsdatabaselanguageperson

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon library="material-symbols">home</six-icon>
  <six-icon library="material-symbols">settings</six-icon>
  <six-icon library="material-symbols">database</six-icon>
  <six-icon library="material-symbols">language</six-icon>
  <six-icon library="material-symbols">person</six-icon>
</div>

Filled

homesettingsdatabaselanguageperson

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon library="material-symbols" filled>home</six-icon>
  <six-icon library="material-symbols" filled>settings</six-icon>
  <six-icon library="material-symbols" filled>database</six-icon>
  <six-icon library="material-symbols" filled>language</six-icon>
  <six-icon library="material-symbols" filled>person</six-icon>
</div>

Sizing

The icons are available in different sizes. Default size is medium (24px).

Extra-small

searchdonesettingshomeinfo

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon size="xSmall">search</six-icon>
  <six-icon size="xSmall">done</six-icon>
  <six-icon size="xSmall">settings</six-icon>
  <six-icon size="xSmall">home</six-icon>
  <six-icon size="xSmall">info</six-icon>
</div>

Small

searchdonesettingshomeinfo

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon size="small">search</six-icon>
  <six-icon size="small">done</six-icon>
  <six-icon size="small">settings</six-icon>
  <six-icon size="small">home</six-icon>
  <six-icon size="small">info</six-icon>
</div>

Medium (default)

searchdonesettingshomeinfo

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon size="medium">search</six-icon>
  <six-icon size="medium">done</six-icon>
  <six-icon size="medium">settings</six-icon>
  <six-icon size="medium">home</six-icon>
  <six-icon size="medium">info</six-icon>
</div>

Large

searchdonesettingshomeinfo

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon size="large">search</six-icon>
  <six-icon size="large">done</six-icon>
  <six-icon size="large">settings</six-icon>
  <six-icon size="large">home</six-icon>
  <six-icon size="large">info</six-icon>
</div>

Extra-large

searchdonesettingshomeinfo

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon size="xLarge">search</six-icon>
  <six-icon size="xLarge">done</six-icon>
  <six-icon size="xLarge">settings</six-icon>
  <six-icon size="xLarge">home</six-icon>
  <six-icon size="xLarge">info</six-icon>
</div>

2× Extra-large

searchdonesettingshomeinfo

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <six-icon size="xxLarge">search</six-icon>
  <six-icon size="xxLarge">done</six-icon>
  <six-icon size="xxLarge">settings</six-icon>
  <six-icon size="xxLarge">home</six-icon>
  <six-icon size="xxLarge">info</six-icon>
</div>

3× Extra-large

searchdonesettingshomeinfo

<div style="display: flex; gap: 1em; min-height: 6rem; align-items: center">
  <six-icon size="xxxLarge">search</six-icon>
  <six-icon size="xxxLarge">done</six-icon>
  <six-icon size="xxxLarge">settings</six-icon>
  <six-icon size="xxxLarge">home</six-icon>
  <six-icon size="xxxLarge">info</six-icon>
</div>

Icons inherit font-size

searchsearchsearch

<div style="display: flex; gap: 1em; min-height: 5rem; align-items: center">
  <span style="font-size: 1rem"
    >
    <six-icon size="inherit">search</six-icon>
  </span>
  <span style="font-size: 2rem">
    <six-icon size="inherit" symbols>search</six-icon>
  </span>
  <span style="font-size: 3rem">
    <six-icon size="inherit" symbols filled>search</six-icon>
  </span>
</div>

Custom SVG

<div style="display: flex; gap: 1em; min-height: 6rem; align-items: center">
  <six-icon size="xSmall" src="/assets/demo-icon.svg"></six-icon>
  <six-icon size="small" src="/assets/demo-icon.svg"></six-icon>
  <six-icon size="large" src="/assets/demo-icon.svg"></six-icon>
  <six-icon size="xxLarge" src="/assets/demo-icon.svg"></six-icon>
</div>

Custom SVG inline

<div style="display: flex; gap: 1em; min-height: 6rem; align-items: center; fill: red">
  <six-icon size="xSmall" src="/assets/demo-icon.svg" inline-svg></six-icon>
  <six-icon size="small" src="/assets/demo-icon.svg" inline-svg></six-icon>
  <six-icon size="large" src="/assets/demo-icon.svg" inline-svg></six-icon>
  <six-icon size="xxLarge" src="/assets/demo-icon.svg" inline-svg></six-icon>
</div>

Properties

Property	Attribute	Description	Type	Default
filled	filled	If set to true the default material outlined icons are not used.	boolean	false
inlineSvg	inline-svg	If the src is a svg, either render or - is better for styling (e.g. fill: red), but slower at rendering. - is better for HTTP caching, but you cannot style the internal SVG elements.	boolean	false
library	library	Icon library for this instance. Overrides the global default. - "material-icons" → Material Icons - "material-symbols" → Material Symbols	"material-icons" | "material-symbols" | undefined	undefined
name	name	Name of the icon	string | undefined	undefined
size	size	The icon's size.	"inherit" | "large" | "medium" | "small" | "xLarge" | "xSmall" | "xxLarge" | "xxxLarge"	'inherit'
src	src	Path to SVG file or a data image	string | undefined	undefined

Slots

Slot	Description
	Used to define the material icon or symbol name when src is not provided.

Shadow Parts

Part	Description
"svg"

Dependencies

Used by

• six-avatar
• six-breadcrumbs
• six-date
• six-datepicker
• six-details
• six-dropdown
• six-file-list-item
• six-file-upload
• six-icon-button
• six-input
• six-item-picker
• six-menu-item
• six-rating
• six-search-field
• six-select
• six-sidebar-item
• six-sidebar-item-group
• six-stage-indicator
• six-tile
• six-timepicker

Graph

---

Copyright © 2021-present SIX-Group