Custom icons in the Panel

Hey there,

I not quite sure about this, but in some cases it might be useful to be able to set a custom icon on a per-template basis for pages that is shown next to the title in the list of pages in the panel instead of the default icon.

I’m curious to hear what you think about this… :smile:



Love this idea! It would be an easy way to distinguish different “types” of pages when we use different ones as children of the same page.

A puzzle piece for when we use pages solely as bricks to build a one-pager?
“Section” pages with a folder icon :wink: /cc @luxlogica
A cog or a DB symbol for pages used as data providers for other pages?



For a recent project I did something like that. Not really intuitive but it works.
As you guys probably know you can add a panel.css like that (config.php):

c::set('panel.stylesheet', 'assets/css/panel.css');

There you can choose a different icon from the fontawesome icons like that:

a[data-helper="Folder"] i:before {
   content: "\f114";

As long as you know the name of the page your can use the data-helper attribute to find and style it.
Especially the folder icon is super useful for clients imho.

But I think an optional field in the blueprint would be way more intuitive. Given it’s already possible to set icons for fields…

1 Like


Definitely a cool idea.

Ha nice trick! I didn’t think about the data-helper. It’s a bit fragile, if the title of the content changes the icon will disappear, and not very flexible, but it can be useful sometimes.

I tried to hack a quick proof of concept. How the icon is called is pretty straightforward in app/helpers.php, I see what to change in app/snippets/pages/sidebar/subpages.php
Where I’m stuck is how to get something like icon: home from the blueprint and pass the value in subpages.php.
Probably something to declare in app/lib/blueprint.php, but I really have no clue. Any idea?

A few days ago I created a solution: (kinda because of this post, even though I didn’t remembered where I read it)

1 Like

Isn’t this similar to this concept:


Just a few seconds late :wink: :laughing:

That’s life :grin: and some more characters to get my 20

Thanks to both of you for pointing me to this PR.

Dayum! I had it almost right. blueprint::find($icon) was the missing piece.
Also I tried to set the default icon with $this->icon = a::get($this->yaml, 'icon', 'file-o'); Oh well.

Good to see it’s coming to core. You’re too fast @distantnative… I tackled this mainly to get a better understanding of Kirby’s innards, so it was useful to me anyway :wink: Thank you.

This would be another way to do it - no need for the if/else statement in the helpers.php in that case. Feeling very indifferent about whether my or this way would be better :smiley:

Well, that’s not sure yet. The pull request is still only a suggestion.

Feeling good to see it was not a dumb idea :grin:

And here it is, combined with my patch that adds a css class to invisible pages: