---
title: Icons
page_title: Icons - PanelBar - Kendo UI for Vue
description: "Add images or predefined and custom icons to the Kendo UI PanelBar wrapper for Vue."
slug: icons_panelbar_wrapper
canonicalLink: "https://www.telerik.com/kendo-vue-ui/components/layout/panelbar/items/titles/"
position: 5
---

<div><WrapperBanner link="/kendo-vue-ui/components/layout/panelbar/items/titles"></WrapperBanner></div> 

# Icons

You can add icons to the items of the PanelBar either through the `image-url` option or `sprite-css-class` attributes.

The following example demonstrates how to create a PanelBar with images.

{% meta height:550 %}
{% embed_file panelbar/icons/basic/main.vue preview %}
{% embed_file panelbar/icons/basic/main.js %}
{% endmeta %}

The following example demonstrates how to create a PanelBar with sprites.

{% meta height:500 %}
{% embed_file panelbar/icons/sprites/main.vue preview %}
{% embed_file panelbar/icons/sprites/main.js %}
{% endmeta %}

## Suggested Links

* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)