Customize

Every path paints with currentColor, so an icon takes the text color of its parent. Set color on the icon or on a wrapper to change it.

.nav-icon {
  color: rebeccapurple;
}

Duocolor, Duotone and Bulk draw their second path in the same color at a lower opacity, so one color themes the whole icon. There is no separate color for the second path.

Icons are drawn on a 24 by 24 grid and checked from 16 to 48 pixels. The viewBox stays 24 by 24, so any width and height scales the drawing cleanly.

<House size={32} />
<House size="1em" />

Line, Duocolor and Duotone are drawn with a 2 px stroke. You can change it, but other widths are not designed weights: corners and gaps were tuned for 2 px. Fill and Bulk are solid shapes with no stroke to change.

The stroke scales with the icon. At 48 pixels a stroke width of 2 renders 4 pixels wide. To keep 2 pixels at 48, set the stroke width to 1.

<House strokeWidth={1.5} />

Put the icon and its label in an inline flex row, so the icon centers on the text without baseline tweaks.

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

Icons from the packages are hidden from screen readers, which is right when a text label sits next to them. Give an icon that stands alone a title. For an icon only button, label the button and keep the icon hidden.

<button>
  <Heart />
  Save
</button>

<CircleCheck title="Paid" />

<button aria-label="Delete">
  <Trash />
</button>

Copied SVG files have no aria attributes. Add aria-hidden="true" yourself.