# Chip Customization

The Chip provides options for customizing its avatar and its select and remove icons.

The component enables you to:

* [Display avatars](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/customization#displaying-avatars)
* [Customize the select icon](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/customization#customizing-the-select-icon)
* [Customize the remove icon](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/customization#customizing-the-remove-icon)

## Displaying Avatars

To provide visual recognition and improve the end user interactions with your app, you can show an avatar in your Chip components. To achieve this, use the [`avatar`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#avatar) property, which accepts a [`ChipAvatarProps`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipavatarprops) object.

To show an image avatar, specify the image source and its alternative text through [`imageUrl`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipavatarprops#imageUrl) and [`imageAlt`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipavatarprops#imageAlt). You can further adjust the avatar with [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipavatarprops#rounded) and [`style`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipavatarprops#style).

The following demo displays image avatars in Chips.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chip/avatar/source.txt)

## Customizing the Select Icon

To customize the icon that appears when the Chip is selected, set the [`selectedSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#selectedSvgIcon) prop to an [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/svgicon) definition, or set [`selectedIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#selectedIcon) to the name of a font icon.

The following example demonstrates custom select icons that appear when you click on a Chip.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chip/select-icon/source.txt)

## Customizing the Remove Icon

A removable Chip displays a remove icon that you can replace with your own. The icon appears only when you set [`removable`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#removable) to `true`. Set [`removeSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#removeSvgIcon) to an [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/svgicon) definition, or set [`removeIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#removeIcon) to the name of a font icon.

The following example demonstrates removable Chips with custom remove icons.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chip/remove-icon/source.txt)

## Suggested Links

* [Chip Content Setup](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/content)
* [Remove Chip](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/remove)
* [Chip Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/appearance)
* [ChipList Customization](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/customization)
* [API Reference of the Chip](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops)
* [API Reference of the ChipList](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops)