<!--- PIcon.stories.mdx -->

import { Meta, Story, Preview, Props, ArgsTable } from '@storybook/addon-docs';
import PIcon from './PIcon.vue';

<Meta title="MDX/Icon" component={PIcon} />

# Icon

<br/>
<h4 style={{fontFamily: '-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif'
}}>
    Icons are used to visually communicate core parts of the product and available actions. They can act as
    wayfinding tools to help merchants more easily understand where they are in the product, and common interaction
    patterns that are available.
</h4>

**To browse a list of all available icons, visit the <a href="https://polaris-vue.hulkapps.com/?path=/story/images-icons-icon--icon">icons</a> preview.**

> **Notice:** We are introducing new Polaris icons, due to this update we will have to remove below listed icons on our future release.

**Removed Icons**
* AnalyticsMajorFilled
* AppsMajorFilled
* CircleAlertMajorFilled
* CircleDisabledMajorFilled
* CircleInformationMajorFilled
* CircleTickMajorFilled
* CustomersMajorFilled
* DiscountsMajorFilled
* HomeMajorFilled
* MarketingMajorFilled
* NotesMinor
* OnlineStoreMajorFilled
* OrdersMajorFilled
* ProductsMajorFilled


```jsx
<PIcon source="CancelSmallMinor" />

```

<ArgsTable />
