Large globe on a tripod stand

Download every part: Web bundle ZIP 1 of 4 Web bundle ZIP 2 of 4 Web bundle ZIP 3 of 4 Web bundle ZIP 4 of 4. Extract all parts into the same folder, then place the collection folder beside your HTML file. Together the parts include all SVGs, PNGs, fonts, CSS, instructions and the license. Keep the subfolders together for these examples.

Three-tone image

This displays all three tones with a transparent background. Set the height; the width follows the original proportions.

<img src="collection/boston-cuts-1832/svg/multitone/boston-1832-p273-245.svg"
     alt="Large globe on a tripod stand" height="96">

An image has its own colour context, so page CSS cannot recolour its internal regions. For a decorative image beside a text label, use alt="".

Three-tone with your own colours

On an HTTP(S) page, load the sprite from the same site. This complete example uses dark primary ink and two strengths of red. Each region has an independent colour and opacity; set the secondary and tertiary values alike for a two-tone appearance.

<style>
  .revival-cut {
    display: inline-block;
    font-size: 96px;
    height: 1em;
    width: 0.818848em;
    vertical-align: middle;
    --fr-primary-color: #24251f;
    --fr-secondary-color: #a5422c;
    --fr-tertiary-color: #a5422c;
    --fr-primary-opacity: 1;
    --fr-secondary-opacity: 0.55;
    --fr-tertiary-opacity: 0.25;
  }
</style>
<svg class="revival-cut" role="img" aria-label="Large globe on a tripod stand">
  <use href="collection/boston-cuts-1832/web/icons-multitone-3.svg#boston-1832-p273-245"></use>
</svg>

Monochrome icon font

Copy the whole web/ folder, including CSS and webfonts. Font size and colour use ordinary CSS. The icon font draws the solid version; use SVG for three-tone artwork.

<link rel="stylesheet" href="collection/boston-cuts-1832/web/icons.css">
<span class="fr-icon fr-boston-1832-p273-245" aria-hidden="true"
      style="font-size:96px;color:#a5422c"></span>
<span>Large globe on a tripod stand</span>

The decorative font icon is hidden from screen readers and has a visible text label. An icon conveying meaning on its own needs role="img" and an aria-label instead of aria-hidden.