Skip to content

Kirby 3.6.0

Icon

<k-icon>

Use to display any icon from the Panel's icon set.

<k-icon type="pencil" />

Props

Prop Type Default Description
alt
string
For better accessibility of icons, you can pass an additional alt attribute like for images.
back
string
Background color/pattern for the icon. Either shorthand for Panel default colors or directly applied CSS value. By default, the background is transparent.
color
string
Sets a custom color. Either shorthand for Panel default colors or directly applied CSS value.
size
string
Supported values:
regular, medium, large
By default the icon size is set to 1rem = 16px, which corresponds with the Panel font size.
type
string
Select the icon with this attribute

Available icons

Emoji support

You can also pass an emoji as icon type:

<k-icon type="😱" />

CSS classes

.k-icon