Open Source Modern SVG Duotone Icons

What are duotone icons?

Duotone icons allow you to display two tones or apply two colors, this is achieved by using two layers on the icon, one primary and one secondary. The secondary layer, by default, is set to an opacity of 30% (0.3) - this behavior can be overridden in our documentation - this would result in a lighter color which makes it look like it has two colors. You can also apply colors directly on the layers and you would have a multicolored icon. This layered structure will give you endless combinations and would also add an illustrative quality to the icons in your personal or commercial projects.

Duoicons instantly inherit the css color and apply it to the icon, but you can also customize it and apply two different colors directly.