Objects
Symbols
Board objects
Logos

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:

Open on CodeSandbox

html

<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" />
	</svg>
	Header
</h2>

🏓 Interactive playground

css

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

🏓 Interactive playground

Colors

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.

Output

Original hex color

Color applied as CSS filter

css

.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.