Styling

Inline SVGs and React components use standard CSS for size and color. No icon stylesheet is required.

Default classes

SVG exports and React components include two classes on the root SVG:

• .fy-icon targets every FYIcons icon.
• .fy-{icon-name} targets an icon by its catalog name, such as fy-plus.

These are styling hooks; they do not apply styles on their own. Classes inside an SVG file loaded through <img> or that originate from CSS, like a mask or background-image, can't be selected by classes, so use inline SVG in your markup when you want these styling hooks.

Global styling

Use .fy-icon for global styling in your root stylesheet. For example, you may want to make all icons match surrounding typography by default:

/* Default all icons to inherit font-size. */
.fy-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.11em;
}

Targeted styling

Use the .fy-icon class with a parent selector to style multiple icons in a group:

.toolbar .fy-icon {
  color: var(--color-inverse);
}

Use .fy-{icon-name} for targeted styling on a single icon:

.callout {
  .fy-icon {
    width: 1.5em;
    height: 1lh;
    align-self: baseline;
  }
  .fy-circle-check-fill {
    color: #16a34a;
  }
}

For additional specificity, you might chain the selectors, even if you find the thought repellent:

.fy-circle-check-fill {
  color: var(--color-green);
}
.fy-icon.fy-circle-check-fill {
  color: var(--color-greener);
}

Color inheritance

SVG paths use currentColor for fills, so they inherit the surrounding text's CSS color property by default. Simply set color on a parent to make its inline icons follow suit:

.btn-toolbar {
  color: #2563eb;
}

Drop the SVG into your button's markup as-is, and it will take on the button's text color without any extra modification:

<button class="btn-toolbar" type="button" aria-label="Add item">
  <svg
    class="fy-icon fy-plus"
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    fill="none"
    viewBox="0 0 16 16"
    aria-hidden="true"
  >
    <path
      fill="currentColor"
      d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"
    />
  </svg>
</button>

Set color on the SVG directly to recolor an icon separately from surrounding text; you do not need to replace its path fills or stroke colors.

An SVG loaded via <img> won't inherit text color - currentColor will be black by default. In this case, you'll want to give your SVG a fill.

Size

Icons default to 16×16px. Set CSS width and height to scale them, or use 1em to match the surrounding text size. Keep the viewBox="0 0 16 16" so the artwork scales properly.

Many icons use filled paths, so changing stroke-width will not change their visual weight. If you really want to increase an icon's weight, you can set both stroke and stroke-width together, but I make no promises that it will look good. Conversely, there's no way to make an icon lighter in weight, since strokes will paint outside the path.