Creating a Bell Alert Icon Using Telerik Components

Updated on Feb 25, 2026

Environment

Product	UI for ASP.NET Core
Version	2026.1.212

Description

I want to create a bell alert icon using Telerik components instead of using custom SVG code. I would like to know if there is an easy way to achieve this using Kendo UI features.

This knowledge base article also answers the following questions:

• How can I design a notification bell icon with Telerik components?
• How to use Kendo Badge for creating alert icons?
• How to apply Kendo icons in UI for ASP.NET Core?

Solution

To create a bell alert icon using Telerik components, use the Kendo UI Badge component along with Kendo icons:

1. Add a div container for the icon and badge.
2. Use the Kendo UI Badge component for the notification count.
3. Apply the Kendo icon with the bell icon class.
4. Style the elements for proper positioning.

Use the following example:

html

<div id="HeaderMenu">
    <span id="icon"></span>

    @(Html.Kendo().Badge()
        .Name("bellIconBadge")
        .Position(BadgePosition.Edge)
        .Rounded(Rounded.Full)
        .Text("0")
    )
</div>

<script>
    kendo.ui.icon($("#icon"), { icon: 'bell' });
</script>

<style>
    #HeaderMenu {
        position: relative;
        display: inline-block;
    }
    
    #icon {
        display: inline-block;
        font-size: 30px;
    }
    
    #bellIconBadge {
        position: absolute;
        top: -6px;
        right: -16px;
    }
</style>

Explanation:

• The BadgePosition.Edge positions the badge relative to the icon.
• The Rounded.Full option ensures a circular badge appearance.
• The kendo.ui.icon method applies the Kendo bell icon.

A runnable example is available in this REPL demo.

See Also

• Kendo UI Badge Overview
• SVG Icons Documentation
• UI for ASP.NET Core Examples