# Panel Icons - but how?

**URL:** <https://forum.getkirby.com/t/panel-icons-but-how/15612>\
**Category:** Questions\
**Tags:** v3\
**Created:** [September 12, 2019, 4:53am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612 "2019-09-12T04:53:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ndugu](https://avatars.discourse-cdn.com/v4/letter/n/779978/32.png) [@Ndugu](https://forum.getkirby.com/u/Ndugu)\
**Post date:** [September 12, 2019, 4:53am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/1 "2019-09-12T04:53:21Z")

</div>

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](https://getkirby.com/docs/reference/panel/icons) 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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [September 12, 2019, 7:07am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/2 "2019-09-12T07:07:46Z")

</div>

The list of icons is here: [https://getkirby.com/docs/reference/panel/icons](https://getkirby.com/docs/reference/panel/icons)

To use, use the icon name:

```auto
icon: calendar

```

```auto
image: false

```

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

---

<div class="post-metadata">

**Author:** ![tkeil69575](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/tkeil69575/32/7439_2.png) [@tkeil69575](https://forum.getkirby.com/u/tkeil69575)\
**Post date:** [October 3, 2019, 9:51pm UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/3 "2019-10-03T21:51:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bvdputte](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/bvdputte/32/8179_2.png) [@bvdputte](https://forum.getkirby.com/u/bvdputte)\
**Post date:** [October 4, 2019, 6:44am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/4 "2019-10-04T06:44:59Z")

</div>

I doubt it, because of licensing.

---

<div class="post-metadata">

**Author:** ![bastianallgeier](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/bastianallgeier/32/7569_2.png) [@bastianallgeier](https://forum.getkirby.com/u/bastianallgeier)\
**Post date:** [October 4, 2019, 6:51am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/5 "2019-10-04T06:51:13Z")

</div>

@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/](https://nucleoapp.com/)

---

<div class="post-metadata">

**Author:** ![tkeil69575](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/tkeil69575/32/7439_2.png) [@tkeil69575](https://forum.getkirby.com/u/tkeil69575)\
**Post date:** [October 4, 2019, 7:59am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/6 "2019-10-04T07:59:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [October 4, 2019, 8:30am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/7 "2019-10-04T08:30:13Z")

</div>

> [@tkeil69575](#):
>

That’s part of the Panel UI Kit: [Icon | Kirby CMS](https://getkirby.com/docs/reference/plugins/ui/icon)

> 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.

---

<div class="post-metadata">

**Author:** ![tkeil69575](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/tkeil69575/32/7439_2.png) [@tkeil69575](https://forum.getkirby.com/u/tkeil69575)\
**Post date:** [October 4, 2019, 8:31am UTC](https://forum.getkirby.com/t/panel-icons-but-how/15612/8 "2019-10-04T08:31:50Z")

</div>

okay, thanks texnixe … understood 😊
