Icon

Overview of the Icon Component

Ionicons is a completely open-source icon set featuring over 700 icons crafted for web, iOS, Android, and desktop applications. Originally built for the Ionic Framework, these icons include both Material Design and iOS versions. When used with Ionic, the <ion-icon> component automatically selects the correct version based on your platform. When used outside of Ionic, applications can choose between iOS and Material Design (MD) platforms.

Properties

🚧
Important Note!
This document lists the properties specific to this particular UI component.
For properties common to most UI components, please check the General components document.

The Icon component has the following Common properties:

Property Name	Property Description
Name	Ionic icons. Click the default logo-ionic button to open the Select icon modal window.
SVG Icon	Allows selection of a custom `.svg` icon and places its URL in the `<src>` attribute. The external file must be a valid `.svg` format and cannot contain scripts or events within the `.svg` element. Click the Change button to select an uploaded image from the Media Manager.

Styles Properties

Under the Styles tab, icons can be styled with several attributes for specific appearances:

Property Name	Property Description
Icon Color	Select a CSS color from the available options: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom, or use the color picker.
Size	The icon size. Available values are: Small or Large.

Visit the Ionic documentation to learn more about Icons.

Updated 13 days ago