Engineering guidelines
There are multiple ways to use these icons in your codebase. The package can be installed as an Ember addon for the convenience of using a component with strong defaults, or it can be consumed in React applications via direct import of the SVG file or as standalone React/SVG icon component.
Accessibility
Accessibility (a11y) support for SVGs is inconsistent across browsers and assistive technology. Currently, best practice is to set the aria-hidden attribute to false on the SVG itself. This means that the icon (both the singular icon and the icon component) will need to be used in context. The icons themselves are for presentation purposes only and should never be used on their own.
However: As a temporary bridge while we work to provide the accessible components in the design system, we have provided the ability to add a title element to the Ember component by defining a value for the @title property. This is a temporary measure and we strongly encourage UI engineering teams to work with their designers and plan to convert any standalone icon use.
Examples of correct use
<button aria-label="Check activity">
<FlightIcon @name="activity" />
</button>
<h2>Activity report <FlightIcon @name="activity" />
Authors should also follow the following guidelines:
- The icons are sized as 16x16(px) and 24x24(px) and should not be used at different sizes without a design consult.
- The icons do not have a unique id generated; authors should take precautions to avoid related accessibility conformance failures.
Use in Ember apps
Installation
To install, run:
yarn add @hashicorp/ember-flight-icons
Note: Because this addon exposes a data-test-icon helper it is suggested consumers install ember-test-selectors. This Ember addon strips out all data-test-* attributes for production builds.
Understanding the component
The component comes with the following defaults:
fillattribute: set to currentColoridattribute: a unique, automatically generated idaria-hiddenattribute: set to trueheightandwidth: default size of 16x16 (px)stretched: if the SVG should have 100% width/height (stretch to fill the parent) - defaults to "false"- (CSS)
class: flight-icon, flight-icon-NAME, flight-icon-display-inline - CSS display: set to
display:inline-block data-test-iconattribute: for the author's testing convenience; set to the value of the@nameproperty.
This makes the base, required invocation quite terse — @name is the only property that requires specification. So this invocation:
<FlightIcon @name="alert-circle" />
Renders to this (where the ID will be unique each time):
<svg
id="icon-ember115"
class="flight-icon icon-alert-circle display-inline"
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
aria-hidden="true"
data-test-icon="alert-circle"
>
<use href="/@hashicorp/ember-flight-icons/icons/sprite.svg#alert-circle-16"></use>
</svg>
The <use> element will then render the correct svg to the shadow dom.
Customizable properties
The following properties are customizable:
- fill (the color)
- size (at this time, only 16 (default) and 24 are supported)
- stretched (true/false)
- display (inline-block or block)
- additional CSS classes
Examples
Fill: To customize the fill attribute, set the @color value (multiple supported ways). The recommended approach to ensure consistency is to use one of the pre-defined variables:
<FlightIcon @name="zap" @color="var(--brand)" />
Other accepted values include named colors and color values themselves.
<FlightIcon @name="zap" @color="rebeccapurple" />
<FlightIcon @name="zap" @color="rgb(46, 113, 229)" />
Size: To use the 24x24 (px) icon size, set the @size value:
<FlightIcon @name="zap" @size="24" />
Stretched: To have the icon fill the parent container (width: 100%, height: 100%, display: block), set the @stretched attribute:
<flighticon="" @name="zap" @size="24" @stretched="{{true}}">
CSS classes: To append additional classes to the component, add class with value(s):
<FlightIcon @name="triangle-fill" class="ds-rotate-90" />
CSS display: To change the default display of inline-block to block, set @isInlineBlock to false:
<flighticon="" @name="triangle-fill" @isinlineblock="{{false}}">
Animated icons
Some of the icons are animated by default (eg. "loading" and "running"). To use them just declare them in the same way that you would withany other icon.
<FlightIcon @name="loading" @size="24" />
Note: a prefers-reduced-motion media query will automatically take care for you of disabling the animation if the user sets this preference in their environment.
Use in React apps
It is also possible to install @hashicorp/flight-icons and use the icons in React applications.
Notice: if you want to have more context you can see the pull-request here where this implementation has been discussed and agreed upon.
Installation
To install, run:
yarn install @hashicorp/flight-icons
Inline SVG
Single icons can be imported and used directly as SVG files using the <InlineSvg> provided by the @hashicorp/react-components library:
// import the SVG file (using 'require')
const iconArrowRight = require('@hashicorp/flight-icons/svg/arrow-right-24.svg?include');
// or import the SVG file (using 'import')
import iconArrowRight from '@hashicorp/flight-icons/svg/arrow-right-24.svg?include';
// elsewhere in the file
<InlineSvg src={iconArrowRight} />
// alternatively you can also use a similar approach
<InlineSvg src={require('@hashicorp/flight-icons/svg/arrow-right-24.svg?include')} />
Notice: the code above is an example, please update it accordingly to your codebase.
Since this is just an SVG asset, there are no props that can be passed to it. You should refer to the <InlineSvg> documentation to know how to apply color and size to the SVG icon.
React/SVG
Single icons can be also imported and used directly as standalone React/SVG components:
// import the React/TypeScript file (using 'require')
const { IconArrowRight24 } = require('@hashicorp/flight-icons/svg-react/arrow-right-24');
// or import the React/TypeScript file (using 'import')
import { IconArrowRight24 } from '@hashicorp/flight-icons/svg-react/arrow-right-24';
// elsewhere in the file
<IconArrowRight24 />
Notice: the code above is an example, please update it accordingly to your codebase.
Props
The component exposes the following props:
color- the color (applied as fill) to the SVG - by default iscurrentColorbut any valid HTML/CSS color is acceptedtitle- the title of the SVG - by default the icon has an aria-hidden attribute applied to it, because is expected to be used in contex (see § Accessibility); if instead you need to use it without text associated to it, you have to pass a title attribute to make it accessible....props- any other prop passed to the component will be applied via spread
The size of the icon is determined by the size of the asset that is imported (each icon is exported in two sizes, 16 and 24). If you need a different size, you have to use CSS to override its intrinsic size.
Animated icons
Some of the icons are supposed to be animated (eg. "loading" and"running"). To use them first of all you have to import the CSS that controls th e icons' animation in your CSS:
// the path here depends if you're using 'svg-react' or 'svg' icons @import ~@hashicorp/flight-icons/svg-react/animation.css';
and the just declare them in the same way that you would with any other icon.
// if you're using the 'svg-react' icons
import { IconLoading16 } from '@hashicorp/flight-icons/svg-react/loading-16'
<IconLoading16 />
// if you're using the 'svg' icons
import svgLoading16 from '@hashicorp/flight-icons/svg/loading-16.svg?include'
<InlineSvg src={svgLoading16} />
Note: a prefers-reduced-motion media query will automatically take care for you of disabling the animation if the user sets this preference in their environment.
Updating existing interfaces
- We maintain a mapping of icon names between Structure and Flight that can be referenced to migrate an icon from Structure to Flight. It is also possible to write codemods to automate this migration. If you are interested in learning more, reach out in #team-design-systems.
Design guidelines
Icon types
There are 4 types of icons in Flight: Generic, Filled, Off, Contained.
Available types
Generic
Glyph with standard outline
- Preferred default style
Filled
Glyph with a solid fill
- Toggled state or for contrast
Off
Glyph with a strike-through
- Disabled state
Contained
Glyph with containing shape, e.g. square, circle, diamond, etc
- For emphasis
Best practices
Use the Generic style icons by default
Use the Filled style where contrast against other icons is important
For example, when showing 1 failure in a list of 20 otherwise successful builds, use a filled "failure" icon but keep the remaining checkmarks outline "success" icons, so the failure stands out more.
Use the Filled style if indicating the toggled state of an icon
For example, if an object can receive a "favorite" action, it would show the "generic" outline variant, and then switch to the "filled" variant once favorited.
Use the Off style icons to indicate a disabled state
For example, in the favoriting example above, if you wanted to "unfavorite" an object you could swap the "filled" variant for "off" on hover to show what the state will become on click.
Use the Contained style icons for emphasis in hierarchy
For example, in a list of objects, an object might have multiple states. A "contained" icon could be used for the overall state, and additional metadata that has state could use the "generic" variants.
Icon sizes
Flight icons are optimized for two icon sizes: 16px and 24px.
Optimized sizes
16
Standard size
- Use in product interfaces
24
Larger size
- Use in marketing pages
Best practices
Display icons at either 16px or 24px
Use 16px icons by default in product interfaces
Consider using 24px icons in product interfaces for empty states
Take care if choosing to display icons at sizes other than 16px and 24px
There may be cases where 16px and 24px values don't fit a design - Flight icons can be resized in these cases but be aware that the design is not optimized for values other than these.
Updating existing interfaces
Where the current icon size is less than or equal to 20px, replace icons with 16px versions
If the size of icon to be replaced is at least 21px, first try to replace it with a 24px version
If 24px seems too large, consider dropping down to 16px and reworking the interface for a better fit.
States
Icons frequently get used to represent different states within product interfaces. Most commonly as states of an object or states of feedback.
States of an object
An object in our interfaces is any object in our API that can return with a state, such as a Build, a Deployment, a Run, a Job, a Cluster or a Network. Objects are typically displayed in lists or as cards and include their state when presented to the user.
In progress
"Building"
Succeeded
"Build passed"
Failed
"Build failed"
Skipped
"Build skipped"
States of feedback
Feedback is presented in our interfaces when actions occur in response to user interaction, such as pressing a button to submit a form, or prior to an action taking place, such as displaying a warning, or when presenting more information.
Success
"Created user"
Error
"Couldn't create user"
Warning
"User is near limits"
Informational
"User has 5 invites"
Common icons
Some Flight Icons represent common actions within the product interfaces.
Editing actions
Create
"Create new team"
Edit
"Edit this team"
Delete
"Delete this item"
Copy
"Copy to clipboard"
Navigation actions
Back
"Go back"
Link
"Visit AWS"
Close
"Dismiss"
Help actions
Tutorial link
When linking to learn.hashicorp.com
Doc link
When linking to documentation
Support
When referencing HashiCorp support
Usage
Whether you're bringing in new icons or replacing existing icons, using Flight in your projects is simple.
Bring in new icons
- Open your project file within Figma.
- Navigate to the Assets panel in the left sidebar.
- Click the Team library icon (looks like an open book), and search for "Flight Icons" in the popup that appears.
- Enable the Flight Icons Library by clicking on the toggle next to the name.
- Search or scroll to find the icon you want to use and drag it into your file.
Replacing existing icons
We maintain a mapping of icon names between Structure and Flight that can be referenced to migrate an icon from Structure to Flight
💡 Tip: Swapping instances, sizes, and colors is easy to do from the right sidebar in Figma.
Assets in ZIP format
You can download the SVG assets (in ZIP format).