Use cases

Color

Icons should always be one color. If used over a color field, negative space should be knocked out.

Although color usage is flexible, icons should always be used in high contrast tones relative to the background to maximize legibility.

Spacing

Padding varies around icons of various primary shapes. Square, vertically and horizontally rectangular, diagonal, and most complex icons can fit within the relative padding bounding box. Circular and some complex icons should be slightly larger to offset the visual weight of surrounding negative space.

Behavior

In certain instances, icons can be animated to aid communication or to reassure the user that an action is functioning as intended. Examples include saving or loading content. Depending on the context, the animated icon follows the standards of the component that contains it, for example, the icon follows the size and padding standards for buttons when placed inside a button to indicate loading or follows standards of a form-level alert within an alert message.

Our previous font icon system provided modifiers to rotate any icon. We found in reality this wasn’t practical and only one icon is ever animated, update. We’ve provided an alias–updating–to be used within the UI when a user needs to be made aware that the website is working on responding to their actions.

Download

Icon font

Our full icon set is available for desktop use as an icon font (.ttf). It can be accessed through programs like Illustrator and InDesign via the glyph panel.

Vector files

Each of our icons is available for download as a vector (.svg) on The Noun Project, a platform that collects and catalogs icons that are created and uploaded by graphic designers from around the world. View on Noun Project

SVG icon basics

The cf-icon component provides Scalable Vector Graphics (SVG) icons for Capital Framework. This component can be used by itself, but is designed to work with Capital Framework.

We subscribe to the guidance offered by Chris Coyier in his article, “A Pretty Good SVG Icon System”, in which he concludes, “Just include the icons inline.”

Because including raw SVG code is not necessarily pretty or user-friendly, we encourage using your templating system to include them by reference.

Note: Jinja2, the templating language that cfgov-refresh uses, has a near-identical syntax for includes, but it requires that the path be enclosed in quotation marks, like so: {% include 'icons/download.svg' %}.

The filenames of the SVGs included with cf-icons match the names in the Icon library section. There are duplicate SVG files for each alias, as well.

Note to contributors: If any icon is ever updated, you must be sure to also update each of the alias SVGs.

What the Less is doing

If you look in cf-icons.less, below the aforementioned sizing variable, you’ll see this simple rule:

.cf-icon-svg {
    height: @cf-icon-height;
    vertical-align: text-top;
    fill: currentColor;
    …
}

Referring back to the example above, you can see that we have encoded class="cf-icon-svg" in the root element of each of our SVG icons. As a result, the Less rule gets applied to all of the SVGs on the page, just like any other HTML element.

We start by limiting the size of the SVG to a proportion of the text height, using the @cf-icon-height variable’s em value. To align the canvas of the icon with the canvas of neighboring text, we set vertical-align: text-top;. Finally, setting fill: currentColor; tells the SVG to set its path’s fill color to match the color value of its parent element.

Caveats

There are two modifications based on restrictions in Internet Explorer 8 and 9 (IE8/IE9).

First, IE8 does not support fill: currentColor. Typically the fallback would be to use a PNG image, but due to the inability to know what the background or text color of its surroundings are, we found it better to fall back to the paired text with no icon.

Second, IE9 displays SVGs as full width by default (not the paths, just the SVG container). To eliminate this issue we’ve set the width of the SVGs to match the height. The whitespace to the left or right may not be quite accurate, but we determined this is an acceptable difference for a legacy browser like IE9.

Inline SVG background

In some cases we embed an SVG as a background image. To accomplish this, a custom less plugin is used to inject the SVG icon source file inline into the CSS background-image property. This is exposed via a mixin, .u-svg-inline-bg( @name ), where @name is the SVG icon canonical name.