# Breadcrumb Icons

You can add [Telerik Font or SVG icons](https://www.telerik.com/blazor-ui/documentation/common-features/icons) to the Breadcrumb items. The component also supports custom icons.

To use Breadcrumb icons, define a property in the component model class and assign the property name to the `IconField` parameter of the Breadcrumb.

The model property can hold:

* A property of the static `SvgIcon` class;
* A member of the `FontIcon` enum;
* A `string` that is a CSS class for a custom icon.

If the icon property name in the Breadcrumb model is `Icon`, there is no need to set the `IconField` parameter.

To select an SVG icon variant for each item, set `IconVariantField` to the model property name that holds the variant name. The default field name is `IconVariant`. See [SVG icon variants](https://www.telerik.com/blazor-ui/documentation/common-features/icons#use-svg-icon-variants) and [Breadcrumb item features](https://www.telerik.com/blazor-ui/documentation/components/breadcrumb/data-binding#breadcrumb-item-features).

> Make sure to [register `font-icons.css` if using Telerik font icons](https://www.telerik.com/blazor-ui/documentation/common-features/icons#font-icon-stylesheet).

> caption How to use icons in Telerik Breadcrumb

<demo metaUrl="client/breadcrumb/icons/" height="250"></demo>

<demo metaUrl="client/breadcrumb/icons/" height="250"></demo>

## See Also

* [Live Demo: Breadcrumb Items](https://demos.telerik.com/blazor-ui/breadcrumb/items)