KendoReact SvgIcon Overview
The KendoReact SVGIcon component is used to display SVG icons; it includes more than 500 icon options.
This is a Free React SvgIconThe KendoReact SvgIcon is free to use, including in production—no sign-up or license required. Check out all 120+ free and premium UI components in the enterprise-grade KendoReact library.Kendo UI Icons version
^5.x.xrequires KendoReactv15.0.0or later. For more information, refer to the Icon Package Compatibility section.
The following example demonstrates the SvgIcon component in action.
The SvgIcon is part of the KendoReact Common Utilities component library. The procedures for installing, importing, and using the Common Utilities are identical for all components in the package. To learn how to use the SvgIcon and the rest of the Common Utilities, see the Getting Started with the KendoReact Common Utilities guide.
Key Features
- Appearance—You can quickly style the SvgIcon by choosing from the predefined styling options.
- Unstyled Mode—You can remove all default visual effects and style the KendoReact SvgIcon in a way that matches your application design perfectly.
- Custom SVG Icons—You can render custom SVG icons inside the KendoReact SvgIcon component.
SVG Icons List
Switch to SVG or Font Icons
You can use the KendoReact IconsContext to switch the type of the icons in your app.
The following code snippet shows how to change the icons type to SVG.
import { IconsContext } from '@progress/kendo-react-common';
const App = () => {
return (
<IconsContext.Provider value={{ type: 'svg' }}>
{/* Your app code goes here */}
</IconsContext.Provider>
);
};