Webfont

These icons can be used as a webfont; the main benefits is a bit easier, though limited, to style with CSS, as any styles that apply to text can be applied as well.

To use the Star Tribune icons as a webfont, include the CSS or SASS.

<link rel="stylesheet" href="//static.startribune.com/assets/libs/strib-icons/0.0.13/strib-icons.css">

Then use the base class, strib-icon and then the icon class which is always prefixed with strib-, for instance:

<i class="strib-icon strib-home"></i>

Treat the icon like text. To change it's color, simply use the CSS color property; you can change it's size with the font-size property.

SVG icons

Using the Star Tribune icons as SVG icons has many benefits including fuller, though still limited, styling as any styles that apply to SVG can apply, and multi-color icons can be used. Note that browser support is not as good as a webfont.

To use, include an SVG with class strib-icon-svg, then reference the ID of the icon in the URL, which is the name with the strib-, as well as the JS so that the SVG can be loaded across domains easily, for example:

<script src="//static.startribune.com/assets/libs/strib-icons/0.0.13/strib-icons.js"></script>

<svg class="strib-icon-svg">
  <use xlink:href="#strib-home"></use>
</svg>

You can style the icons with CSS with some limitations. You can only add styles to the root of the icon, not to a specific part. Treat the icon like an image and an SVG. To change it's color, use the SVG CSS fill property; you can change it's size with the height or width property.

For icons that have default colors, you can change the colors with CSS variables. For instance, adding a different color to the Star Tribune logo, you could do:

.strib-icon-svg:hover {
  --strib-strib-star-top: red;
  --strib-strib-star-bottom: pink;
}

There are some icons that require a specific white fill, though these should be drawn. If you need to update that fill use the --strib-icon-background variable.