Skip to content

Kirby 3.9.8

Search
    Search by Algolia

    Icon

    <k-icon>

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

    <k-icon type="edit" />

    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