Changing the category icons in the Hosted Knowledge Base

At this stage, there isn't built in support for altering the icons that you see when visiting your hosted knowledge base. For example, these: 

However, what you can do is use some CSS magic to hide what is currently displayed, and show something else instead.

Let's walk through the steps to achieve this.

NB This guide is for the Modern Theme. But you can achieve a similar effect with the legacy theme by altering the CSS to suit.

The CSS that is shown below, should be added to the Custom CSS section 

Hide the current logo

.kb-category-card svg.kb-icon {
  display: none;
}

Now replace it instead with an image

The below example will be for category with ID of 123.
You can get the ID of your category by clicking on the category, then taking note of the ID that will appear in the URL.

[data-category-id="123"] .kb-category-card__icon-wrapper {
  background-image: url(https://someurl.com/toimage.jpg);
  height: 30px;
  width: 30px;
  background-size: contain;
}

(Be sure to change 123 to your category ID)

This will at least add the image to the icon area, but you'll likely need to make some additional tweaks to make it look just like you want (with things like height, background color, border radius, etc). All things your frontend engineers will know as childs play :)

Alternatively, you can use our KB Kit to create an entirely custom Theme, where you have complete control over all output.