New to Kendo UI for jQuery? Start a free 30-day trial
Icons
Updated on Mar 24, 2026
Each segment button in the SegmentedControl can display a text label, an icon, or both. Use the icon, iconClass, and text item options to control each button's appearance individually.
Text Labels
Set the text property on each item to show a visible label inside the button.
html
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ text: "Option 1", value: "option1" },
{ text: "Option 2", value: "option2" },
{ text: "Option 3", value: "option3" }
]
});
</script>Icons from the Kendo UI Theme
Use the icon property to render a named icon from the built-in Kendo UI icon set inside a segment button. When no text is provided, the item's value is used as the button's accessible label.
html
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ icon: "bold", value: "bold" },
{ icon: "italic", value: "italic" },
{ icon: "underline", value: "underline" }
]
});
</script>Icons with Text
Combine icon and text to display both inside the same segment button.
html
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ text: "Settings", icon: "gear", value: "settings" },
{ text: "Home", icon: "home", value: "home" },
{ text: "Profile", icon: "user", value: "profile" }
],
selectedValue: "home"
});
</script>Custom Icon Classes
Use iconClass to append one or more CSS class names to the icon element. This allows you to apply custom styles or integrate icons from external icon libraries.
html
<div id="segmentedControl"></div>
<script>
$("#segmentedControl").kendoSegmentedControl({
items: [
{ text: "Settings", icon: "gear", iconClass: "custom-icon", value: "settings" },
{ text: "Home", icon: "home", value: "home" }
]
});
</script>