Design System Design System

  • Home
  • Installation
  • Design principles
  • Release process
Foundation
  • Accessibility
  • Colors
  • Glossary
  • Icons
  • Layout
  • Styling
  • Writing
Patterns
  • Errors
  • Filters
  • Page headers
Components
  • App bars
  • Buttons and links
  • Loaders
  • Menus
  • Modals
  • Snackbars
  • Tabs
  • Text fields
Composables
  • useKLiveRegion
  • useKResponsiveElement
  • useKResponsiveWindow
  • useKShow
Code library components
  • KBreadcrumbs
  • KButton
  • KButtonGroup
  • KCard
  • KCardGrid
  • KCheckbox
  • KCircularLoader
  • KDateRange
  • KDropdownMenu
  • KEmptyPlaceholder
  • KExternalLink
  • KFixedGrid
  • KFixedGridItem
  • KFocusTrap
  • KGrid
  • KGridItem
  • KIcon
  • KIconButton
  • KImg
  • KLabeledIcon
  • KLinearLoader
  • KListWithOverflow
  • KLogo
  • KModal
  • KOptionalText
  • KOverlay
  • KPageContainer
  • KRadioButton
  • KRadioButtonGroup
  • KRouterLink
  • KSelect
  • KSwitch
  • KTable
  • KTabs
  • KTabsList
  • KTabsPanel
  • KTextTruncator
  • KTextbox
  • KTooltip
  • KTransition

KIcon link to current page

GitHub develop | GitHub Release notes
  • Overview
  • Props

KIcon link to current page

GitHub develop | GitHub Release notes
  • Overview
  • Props

Overview
#

See the page on icons for design guidance and a list of available icons. If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image icon.

Props
#

Name Description Type Default Required
icon
#
Icon token identifier
string — true
color
#
Color to apply to the icon
string null —