# Embedded Icons

This help article shows how to use embedded icons in **RadToggleButton**, lists the necessary CSS classes and describes the skins specifics.

* [Configuration](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/embedded-icons#configuration)

* [CssClass List of Embedded Icons](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/embedded-icons#cssclass-list-of-embedded-icons)

* [Skins Specifics](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/embedded-icons#skins-specifics)

> caption Figure 1: List of Embedded icons in RadToggleButton.

![List of Embedded Icons in RadToggleButton](https://www.telerik.com/products/aspnet-ajax/documentation/assets/19142139e644ab0fe7f681a2f83e6b0c/embedded-icons-list.png)

You can also use [custom icons](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/custom-icons) (image or font icons) and [fine-tune their position, color and size](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/fine-tune).

## Configuration

To make the control easier to use, **Telerik** provides a large set of built-in icons (**Figure 1**). To use them, set the **Icon.CssClass** property of each **ButtonToggleState** (**Example 1**) to one of the predefined [CSS class names](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/embedded-icons#cssclass-list-of-embedded-icons), and the respective icon will be shown on the control.

> caption Figure 2: RadToggleButton with an embedded icon (ButtonToggleState.Icon.CssClass="rbOk") from Example 1.

![Button with Embedded Icon](https://www.telerik.com/products/aspnet-ajax/documentation/assets/f21403bd822e116c98183d02438277bb/button-embedded-icon.png)

> caption Example 1: Declaration of embedded icons in RadToggleButton states.

```ASP.NET
<telerik:RadToggleButton runat="server" ID="RadToggleButton1" Text="Button with Icon">
	<ToggleStates>
		<telerik:ButtonToggleState Selected="true">
			<Icon CssClass="rbOk" />
		</telerik:ButtonToggleState>
		<telerik:ButtonToggleState>
			<Icon CssClass="rbCancel" />
		</telerik:ButtonToggleState>
	</ToggleStates>
</telerik:RadToggleButton>
```

## CssClass List of Embedded Icons

You can find below the full list of CSS classes responsible for the embedded icons in **RadToggleButton**. The **CssClass** is composed in the following way: \[**r**]ad\[**b**]utton\[**IconName**]. For example **rbAdd**.

|            |            |           |             |              |
| ---------- | ---------- | --------- | ----------- | ------------ |
| rbAdd      | rbPrevious | rbPrint   | rbRSS       | rbYouTube    |
| rbRemove   | rbNext     | rbRefresh | rbMail      | rbVimeo      |
| rbOk       | rbOpen     | rbSearch  | rbFB        | rbBehance    |
| rbCancel   | rbAttach   | rbHelp    | rbTwitter   | rbDribble    |
| rbUpload   | rbSave     | rbCart    | rbLinkedIn  | rbGooglePlus |
| rbDownload | rbConfig   | rbEdit    | rbPinterest |              |



## Skins Specifics

The color of the predefined icons can be white or black, depending on the chosen Skin. You can see the difference between the **Silk** and **Glow** skin in **Figure 3**.

> caption Figure 3: Embedded icons in RadToggleButton for the Silk and Glow skin have white and black colors.

![List of Embedded Icons in RadToggleButton](https://www.telerik.com/products/aspnet-ajax/documentation/assets/a029187fa8643e20628d5c62c28723d8/embedded-icons-list-black-white.png)



## See Also

* [Fine-tune Icons](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/fine-tune)

* [Custom Icons](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/functionality/icons/custom-icons)

* [RadToggleButton Overview Demo](https://demos.telerik.com/aspnet-ajax/togglebutton/overview/defaultcs.aspx)