# Item Appearance

The Kendo UI for Vue Breadcrumb component provides different options for customizing the appearance of the items.

* [Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/layout/breadcrumb/appearance#configurator-demo)
* [Size](https://www.telerik.com/kendo-vue-ui-develop/components/layout/breadcrumb/appearance#size)
* [Item SVG Icon](https://www.telerik.com/kendo-vue-ui-develop/components/layout/breadcrumb/appearance#item-svg-icon)
* [Custom icon](https://www.telerik.com/kendo-vue-ui-develop/components/layout/breadcrumb/appearance#custom-icon)

## Configurator demo

The following example demonstrates configuring the different aspects of the Breadcrumb appearance through a configurator.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/breadcrumb/appearance/configurator/source.txt)

## Size

The Breadcrumb allows selecting a predefined size option that changes its size.

To change the default size of the Breadcrumb, set its [size](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/breadcrumbprops#size) property which will change the padding of its elements. The available size options are:

* `small` - sets the padding of the elements to 2px 10px
* `medium` (default) - sets the padding of the elements to 4px 10px
* `large` - sets the padding of the elements to 6px 10px

The following example demonstrates how to define the Breadcrumb size:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/breadcrumb/appearance/sizing/source.txt)

## Item SVG Icon

The Breadcrumb enables you to add icons inside the items. To achieve this, set the `icon` inside the [data](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/breadcrumbprops#dataitems) object property of the Breadcrumb component. The icon is rendered through the [icon](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/breadcrumblinkprops#icon) property of the BreadcrumbLink component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/breadcrumb/appearance/icon-class/source.txt)

## Custom icon

The Breadcrumb enables you to set a custom icon item. To achieve this, set the `icon` inside the [data](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/breadcrumbprops#dataitems) property of the Breadcrumb component that sets the [icon](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/breadcrumblinkprops#icon) inside the BreadcrumbLink component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/breadcrumb/appearance/item-icon/source.txt)

## Suggested Links

* [API Reference of the Breadcrumb Props](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/breadcrumbprops)
* [API Reference of the BreadcrumbLink Props](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/breadcrumblinkprops)
* [Kendo UI for Vue Icons](https://www.telerik.com/kendo-vue-ui/components/styling/icons/)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)