---
title: "Perspective - Icon"
description: "The Icon component provides access to a collection of Scalable Vector Graphic (SVG) images."
---

# Perspective - Icon

> The Icon component provides access to a collection of Scalable Vector Graphic (SVG) images.

![](image2018-6-12_14-4-16.png)

**Component Palette Icon**:  

![](2019-05-07_9-19-25.png)

## Description
The Icon component provides access to a collection of Scalable Vector Graphic (SVG) images, chosen to be useful as icons in a Perspective session.

The materials icon library is a primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons. You can also add your own custom repository of icons. For more information on icons, see [Images and Icons in Perspective](ignition-modules/perspective/working-with-perspective-components/images-and-icons-in-perspective.md).

:::note
When attempting to change the color of an icon via style class, set the desired color using the Text category's Color property. 
:::

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name                  | Description                | Property Type | 
| --------------------- | --------------------------------------------------- | ------------------------------------------------|
| path	|Shorthand path to icon source, in format: library/IconName (e.g., material/3d_rotation). See Icons for more information about available icons.| value: string| 
| color|	Color of the icon. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). | color|
|style| Use Style to customize the visual style of the component. The [Style menu](appendix/reference-pages/style-reference.md) contains all the tools for modifying text, background, margins, and borders. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).|object|

## Component Scripts and Events

## Examples
### Example 1

![](2019-02-15_16-51-16-icn-ex-m.png)

|Property|Value|
|--|--|
|props.color|	#00AC00|

### Example 2

![](2019-04-26_13-59-05.png)

|Property|Value|
|--|--|
|props.path	|material/record_voice_over|
|props.color|	#000088|
|props.style.borderstyle|	ridge|
|props.style.borderColor|	#FFAC47|
|props.style.borderWidth|	6px|