# Custom ColorPicker

The ColorPicker enables you to customize its appearance.

The component supports the following options:

* [Customizing the palette popup](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/colorpicker/custom#customizing-the-palette-popup)
* [Customizing the gradient popup](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/colorpicker/custom#customizing-the-gradient-popup)
* [Displaying Kendo UI for Vue icons in the button](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/colorpicker/custom#displaying-kendo-ui-icons)
* [Displaying custom icons in the button](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/colorpicker/custom#displaying-custom-icons)

## Customizing the Palette Popup

To specify the rendering, columns, and tile sizes of the ColorPicker, and to customize the color formats of its palette, use the [`paletteSettings`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorpickerpalettesettings) option.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/colorpicker/custom/palette/source.txt)

## Customizing the Gradient Popup

To customize the gradient options of the ColorPicker, use the [`gradientSettings`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorgradientprops) configuration.

The following example demonstrates how to specify if the opacity slider of the ColorGradient will be displayed.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/colorpicker/custom/gradient/source.txt)

## Displaying Vue Icons

To display an [existing Kendo UI for Vue icon](https://www.telerik.com/kendo-vue-ui-develop/components/styling/icons) in the ColorPicker button, provide the name of that icon without the `k-icon` class and the `k-i-` prefix to the `icon` property of the component. For example, instead of `k-icon k-i-edit-tools`, add `edit-tools`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/colorpicker/custom/kendo-icons/source.txt)

## Displaying Custom Icons

To display a custom icon in the ColorPicker button, provide the full CSS class name of the icon to the [`iconClassName`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorpickerprops#iconclassname) property of the component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/colorpicker/custom/custom-icons/source.txt)

## Suggested Links

* [API Reference of the ColorPicker](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/colorpickerprops)