Icon font
Use in web applications, on buttons, and anywhere you need more than a few icons.
<i class="modus-icons" aria-hidden="true">hard_hat</i>
SVG sprite
Use for static sites when you only need a few icons.
<svg class="mi" width="1em" height="1em" fill="currentColor">
<use xlink:href="/connect-icons.svg#hard-hat" />
</svg>
SVG code
Use when you don't want any dependency.
info_outlined
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mi-connect mi-hard-hat" viewBox="0 0 24 24">
<path d="M12.026 5.009c1.688.002 2.877.244 3.576.52.019 1.007.029 4.46-.892 7.001l.588.21c.048-.105 1.178-2.517 1.7-6.031.128.235.186.414.189.425 4.508 2.507 4.84 7.218 4.84 7.218.008.008.685.696.789.955.104.266.178 2.344.18 2.377.065 1.025-.661 1.2-.683 1.206H19.92c-.265.563-.881.868-1.157.868v.009h-6.758v-.018H5.23c-.275 0-.883-.304-1.148-.868H1.679c-.012-.003-.749-.165-.674-1.206.002-.036.078-2.12.181-2.377.104-.258.775-.942.787-.954 0-.01.338-4.722 4.841-7.218 0 0 .057-.183.19-.426.521 3.514 1.651 5.926 1.699 6.03l.588-.209c-.92-2.541-.911-5.985-.892-7C9.1 5.243 10.297 5 11.996 5z"/>
</svg>
SVG CSS code
Use for embedding your icons in CSS with no dependency.