Duotone Icons: Adding Depth to Your Interface

Most icons are a single solid shape. Duotone icons are built from two layers, a primary and a secondary, each with its own color and opacity. The result is depth, without any extra markup.

How duotone works in Iconfyra

A duotone icon renders two overlapping glyphs. By default the primary layer is full opacity and the secondary sits behind it at 40% opacity. Set a single color and both layers derive from it automatically:

.feature-icon { color: #4f46e5; }
<i class="icf-duotone icf-solid icf-shield feature-icon"></i>

Setting primary and secondary colors

For full control, set each layer independently with CSS custom properties. The primary layer is the main shape; the secondary is the accent behind it.

.brand-icon {
  --icf-primary-color: #4f46e5;   /* main shape */
  --icf-secondary-color: #c7d2fe; /* accent layer */
}

This lets you match an icon to two brand colors exactly, instead of relying on a single tinted color with automatic opacity.

Controlling opacity

If you prefer the single-color approach but want a different blend, tune the opacity of each layer:

.subtle-icon {
  color: #0f172a;
  --icf-primary-opacity: 1;
  --icf-secondary-opacity: 0.25; /* fainter accent */
}

Lower the secondary opacity for a more subtle effect, or raise it toward 1 for a bolder, higher-contrast look.

Quick reference

• --icf-primary-color sets the main layer color (defaults to the element color).
• --icf-secondary-color sets the accent layer color.
• --icf-primary-opacity defaults to 1.
• --icf-secondary-opacity defaults to 0.4.

Where duotone shines

• Feature sections that want icons to feel premium.
• Dashboards where subtle layering helps many icons read distinctly.
• Marketing pages that need polish and visual interest.

When to stay solid

In toolbars, dense tables, and tiny controls, solid icons read more clearly. Duotone is at its best at larger sizes where both layers are visible.

Two layers, two colors, full CSS control, depth by design.