Panel Icons - but how?

Kirby 3 Solved ✅
1

I almost don’t dare to ask, but how can I change the icons of the pages in the panel?

In the docs it says: “Kirby comes with a set of icons that you can use in blueprints and extensions.” Ok, but how?

I undestand ``ìcon: page``` and I understand that I can use emojis but how can I use the Kirby ones, which are wonderful.

I found this and saw <k-icon type="file-document"> but I have no clue how to use that code. Where do I put it? What kind of code is it?

Also if I have a file attached to a page Kirby shows the image of that file. I found ``ìmage:false``` but it has no effect.

2

The list of icons is here: https://getkirby.com/docs/reference/panel/icons

To use, use the icon name:

icon: calendar

image: false

is correct. You have to clear the browser cache for it to take effect.

3

Is it possible to use kirby icons outside of the panel, e.g. in markdown somehow?

4

I doubt it, because of licensing.

1 Like
5

@tkeil69575 @bvdputte is right. We use a licensed icon set called Nucleo. But the license is not too expensive and the icons can afterwards be used in any of your own projects: https://nucleoapp.com/

1 Like
6

Ah, okay, thank you both - that’s def. good to know. However, my question was more aimed at the technical side, as the orginal poster had asked about how to use <k-icon type="file-document"> … so, how do you use that? and can it also be used outside of the panel?

7

That’s part of the Panel UI Kit: Icon | Kirby CMS

Our Panel is based on Vue and has its own UI component kit. You can use and extend all our components in your Panel plugins for a super fast and consistent developer experience.

So no, this is not for use outside of the Panel.

1 Like
8

okay, thanks texnixe … understood :blush: