What is KendoReact
    Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Knowledge Base
    Changelog
    Copyright
Components / Common Utilities / SvgIcon / Getting Started / 

Getting Started with KendoReact SvgIcon

The SvgIcon component is used to display svg icons. The KendoReact delivers more than 500 SVG icons.

The SVGIcon Component is part of KendoReact, a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

Start Free Trial

Basic Usage

The following example demonstrates the SvgIcon component in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Functionality and Features

SVG Icons List

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom SVG Icons

The SvgIcon component allows you to display custom SVG icons (not available in the KendoReact default icons set). You could provide the inner SVG elements as children to the SvgIcon. SVG element has default viewBox set to 0 0 24 24. This can be customized with the viewBox property.

Custom SVG icons also allow setting all predefined appearance options such as different sizes, theme colors and flipping.

Example
View Source
Edit In Stackblitz  
Change Theme:

Suggested Links

Previous
Appearance
Next
Appearance

In this article

Not finding the help you need?

Contact Support