New to Telerik UI for Blazor? Download free 30-day trial

Change Checkbox Icon


Product Checkbox for Blazor


How do I change the checkbox icon? I want to use another icon, not the default checkmark.


Add a Class to the component and cascade through it to alter the font icon glyph that is used.

You can replace it with a different glyph, even froma different font, you can chang the size of the icon and the checkbox and its color.

How to change the checkbox icon

<TelerikCheckBox Value="true" Class="heart-icon">
<TelerikCheckBox Value="false" Class="heart-icon">
<TelerikCheckBox Value="false" Indeterminate="true" Class="heart-icon">

    /* remove some built-in styles */
    .heart-icon.k-checkbox:checked:focus {
        border: none;
        background: none;
        box-shadow: none;

        .heart-icon.k-checkbox:indeterminate::before {
            transform: none;
            top: 0;
            left: 0;
            width: auto;
            height: auto;
            font-size: 30px; /* used for dimensions, see the next section */

    /* set desired dimensions */
    .heart-icon.k-checkbox {
        width: 30px;
        height: 30px;

        /* change the font icon glyph to a different one - in this case - a heart icon from the Telerik font
        we also change the colors here to denote states, you can alter this further - like using your own fonts or colors
        .heart-icon.k-checkbox:checked::before {
            content: "\e301";
            color: #ff6358;

        .heart-icon.k-checkbox:indeterminate::before {
            content: "\e300";
            color: #ff6358;
            background: none;

        .heart-icon.k-checkbox::before {
            content: "\e300";
            color: #656565;
In this article
Not finding the help you need? Improve this article