<!DOCTYPE html>
<html>
<head>
<!--CLARITY ICONS STYLE-->
<link rel="stylesheet" href="https://unpkg.com/clarity-icons/clarity-icons.min.css">
<!--CLARITY ICONS DEPENDENCY: CUSTOM ELEMENTS POLYFILL-->
<script src="https://unpkg.com/@webcomponents/custom-elements/custom-elements.min.js"></script>
<!--CLARITY ICONS API & ALL ICON SETS-->
<script src="https://unpkg.com/clarity-icons/clarity-icons.min.js"></script>
</head>
<body>
<p>
<clr-icon shape="user" size="24"></clr-icon> lives in the Core Shapes set.
</p>
<p>
<clr-icon shape="piggy-bank" size="24"></clr-icon> lives in the Commerce Shapes set.
</p>
<p>
<clr-icon shape="pencil" size="24"></clr-icon> lives in the Essential Shapes set.
</p>
<p>
<clr-icon shape="play" size="24"></clr-icon> lives in the Media Shapes set.
</p>
<p>
<clr-icon shape="heart" size="24"></clr-icon> lives in the Social Shapes set.
</p>
<p>
<clr-icon shape="truck" size="24"></clr-icon> lives in the Travel Shapes set.
</p>
<p>
<clr-icon shape="tablet" size="24"></clr-icon> lives in the Technology Shapes set.
</p>
</body>
</html>