---
title: Icon
description: Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.
api_name: app-home
source_url:
  html: https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon
  md: https://shopify.dev/docs/api/app-home/polaris-web-components/media/icon.md
---

# Icon

Renders a graphic symbol to visually communicate core parts of the product and available actions. Icons can act as wayfinding tools to help users quickly understand their location within the interface and common interaction patterns.

## Properties

* color

  "base" | "subdued"

  Modify the color to be more or less intense.

* interestFor

  string

  ID of a component that should respond to interest (e.g. hover and focus) on this component.

* size

  "small" | "base"

  Adjusts the size of the icon.

* tone

  "info" | "success" | "warning" | "critical" | "auto" | "neutral" | "caution"

  Sets the tone of the icon, based on the intention of the information being conveyed.

* type

  "" | "replace" | "search" | "split" | "link" | "edit" | "product" | "variant" | "collection" | "select" | "info" | "incomplete" | "complete" | "color" | "money" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" | "alert-location" | "alert-octagon" | "alert-octagon-filled" | "alert-triangle"

  Specifies the type of icon that will be displayed.

### Examples

* #### Code

  ##### Default

  ```html
  <s-icon type="home"></s-icon>
  <s-icon type="order"></s-icon>
  <s-icon type="product"></s-icon>
  <s-icon type="settings"></s-icon>
  ```