Board objects

Including icons in HTML

The SVG files are in the ./icons directory inside the NPM package. To use the SVG icon right away, copy the file(s) you need to your project.

For example, if you want to make a header with the arrow-line-shape icon inside of it:


<h2 class="my-header">
	<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path d="m14.293 8.293-11 11a1 1 0 1 0 1.414 1.414l11-11L18 12l3-9-9 3 2.293 2.293Z" />

🏓 Interactive playground


.my-header svg {
	width: 20px;
	height: 20px;
	display: inline-block;

🏓 Interactive playground


While you shouldn't need to change the colors of the Icons, if you need to change an icons' color, you have to use CSS filters. We use the CSS background-image property to add the icon to a HTML element, which doesn't accept a color parameter. With this approach, colors aren't always 100% accurate.

Icon color generator

Converting hex colors into CSS-filters can be inaccurate, check the output below to ensure good results.

Color loss: 5.3 - the color is somewhat off. Consider running it again if there is a unacceptable difference in the two colors shown below.


Original hex color

Color applied as CSS filter


.your-icon {
	filter: invert(16%) sepia(88%) saturate(7496%) hue-rotate(359deg) brightness(107%) contrast(109%);
CSS Filter generation based upon this codepen.

Another option is to include the SVG markup in your HTML and using CSS fill="your-color" to alter the colors.

To use icons in your design mockups, check out the Mirotone UI Library on Figma, that includes all icons in the library, and more.