Icon

Icons

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

Material Icons (legacy)

Outlined

pie_chartsettingssickfortcastle

<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>fort</six-icon>
  <six-icon>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>

Properties

Property	Attribute	Description	Type	Default
filled	filled	If set to true the default material outlined icons are not used.	boolean	false
library	library	Icon library to use when no library prop is provided. By default, all <six-icon> instances fall back to the globally configured default library (via setDefaultIconLibrary() / getDefaultIconLibrary()), which is "material-icons" unless changed at runtime. This allows teams to switch the default across an entire project without having to set the library prop on every <six-icon> instance. Icon library for this instance. Overrides the global default. - "material-icons" → Material Icons - "material-symbols" → Material Symbols	"material-icons" | "material-symbols" | undefined	undefined
size	size	The icon's size.	"inherit" | "large" | "medium" | "small" | "xLarge" | "xSmall" | "xxLarge" | "xxxLarge"	'inherit'

Slots

Slot	Description
	Used to define the material icon name.

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