Skip to main content


  • 4 minutes to read

You can see predefined icons in different DevExpress Blazor components, for example, in an expand button in an Accordion and TreeView, series legend items in a Chart, etc. DevExpress Blazor components also support custom icons from DevExpress icon libraries, Iconic, Bootstrap-recommended libraries, or any other library of your choice.

View Example: Grid - How to use icons instead of default command buttons Watch Video: Applying CSS Styles and Adding Icons to Blazor Components

Add Custom Icons to DevExpress Blazor Components

Predefined component icons are 16 by 16 pixels in size. You can specify this size for your custom icons for the UI consistency.

Use the IconUrl property to specify a URL for an icon in the following navigation and layout components:

Component Unbound Mode Bound Mode
DxAccordion AccordionItem.IconUrl DxAccordionDataMapping.IconUrl
DxContextMenu ContextMenuItem.IconUrl DxContextMenuDataMapping.IconUrl
DxFormLayoutGroup HeaderIconUrl Not Applicable
DxFormLayoutTabPage HeaderIconUrl Not Applicable
DxMenu MenuItem.IconUrl DxMenuDataMapping.IconUrl
DxTab / DxTabPage DxTabBase.TabIconUrl Not Applicable
DxToolbar DxToolbarItemBase.IconUrl DxNavigationDataMappingBase.IconUrl
DxTreeView TreeViewNode.IconUrl DxTreeViewDataMapping.IconUrl

Specify the IconCssClass property to change the appearance of the icon specified by the IconUrl property. The example below shows how to assign an icon to a toolbar item and specify its size:

    .my-style {
        width: 16px;

        <DxTreeViewNode Name="Overview" 
                        IconCssClass="my-style" />
        <DxTreeViewNode Name="Editors" Text="Data Editors" />
        <DxTreeViewNode Name="FormLayout" Text="Form Layout" NavigateUrl="" />
        <DxTreeViewNode Name="TreeView" Text="TreeView" NavigateUrl="" />

Path to the TreeView Icon

For other components or when you can assign an icon as a CSS class, use the IconCssClass property. The code below demonstrates how to assign Open Iconic icons to Toolbar items:

<div class="card p-2">
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="" />
        <DxToolbarItem BeginGroup="true" IconCssClass="oi oi-align-left" />
        <DxToolbarItem IconCssClass="oi oi-align-center" />
        <DxToolbarItem IconCssClass="oi oi-align-right" />
        <DxToolbarItem IconCssClass="oi oi-cog" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="oi oi-info" />

Toolbar Overview

DevExpress Icon Libraries

You can incorporate icons developed by DevExpress into your Blazor application. Refer to the sections below to investigate available options.

Blazor & XAF Icon Library

Icons used within DevExpress Blazor components are available as a part of our Figma UI Kit. Follow the steps below to download these icons and add them to an application:

  1. Open the Icon Library file. Click the Open in Figma button.

    Open the Figma File

    The Figma application opens in a new tab.

  2. In the left side bar, choose the Blazor & XAF page that shows all icons used in Blazor components and XAF.

    Figma File: Inner Structure

  3. Select icons you want to download: hold Ctrl and click icons you need in the left side bar.

    Figma: Multiple Selection

  4. In the right side bar, expand the Export section. Set the icon format to SVG.

    Figma Export Settings

  5. Click the Export button to download all selected icons as an archive.

  6. Add the icons to the application’s solution folder.

  7. Use the IconURL or IconCssClass property to assign an icon to a component as described in the section above: Add Custom Icons to DevExpress Blazor Components.

You can also download custom icons used in DevExpress Blazor demos. Refer to the following GitHub folder: SVG Icons.

DevExtreme Icon Library

DevExtreme includes SVG and font icons for all DevExtreme themes. You can find all available icons in the following topic: DevExtreme Icons.

Add a link to one of the DevExtreme themes in one of the following files to access the icon set:

  • Pages/_Layout.cshtml for Blazor Server applications created with a Microsoft template in .NET 6
  • Pages/_Host.cshtml for Blazor Server applications created with a DevExpress Template in .NET 6 and .NET 7 or with a Microsoft template in .NET 7
  • wwwroot/index.html for Blazor WebAssembly or Hybrid applications in .NET 6 and .NET 7
  • Components/App.razor for Blazor Web applications in .NET 8

Specify dx-icon-<icon-name> as the IconCssClass property value, where icon-name is the name of the icon you want to use.

The example below shows how to assign DevExtreme icons to Toolbar items:

<div class="card p-2 bg-transparent">
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="" />
        <DxToolbarItem BeginGroup="true" IconCssClass="dx-icon-alignleft" />
        <DxToolbarItem IconCssClass="dx-icon-aligncenter" />
        <DxToolbarItem IconCssClass="dx-icon-alignright" />
        <DxToolbarItem IconCssClass="dx-icon-preferences" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="dx-icon-info" />

Toolbar with DevExtreme icons