Skip to main content

Icons

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/icon"></script>

NPM#

npm i @pearson-ux/icon --save

Demo#

<pearson-icon icon="menu" size="18"></pearson-icon>

Structure#

To add an icon, just add the markup in your app where you want it displayed.

Styling#

pearson-icon {
fill: red;
}

API#

Required#

All attributes in this API are required.

AttributeTypeDefaultDescription
iconStringunsetThe name of the icon you want to appear. Please visit our CSS icon page for a full list of icons
sizeStringunset The value can be either 18 or 24 and sets the size of the SVG icon

CSS Icons#

Do you prefer to use our SVG sprite library instead of a web component? No problem, Please visit our CSS icon page for detailed instructions on how to use our SVG Icon library.