Iconography
Icons are used throughout the Spark language to create visual interest, to make content easily scannable, and to provide access to information and actions in space-constrained contexts.
While an icon may have various meanings depending on the context, our goal is to stay consistent across the product suite. We have compiled a list of recommended usage for each Spark icon to help guide your design choices.
Spark Icon Font
Streamline icons have been selected as the Spark icon set based on its extensive range of imagery, modern aesthetic and availability in both outline and fill formats.
All icons in our library have been incorporated into the Spark icon font which can be downloaded in the Resources section.
Requesting New Icons
In the event that a new icon needs to be added to the Spark icon font, select an appropriate icon from the Streamline set (available in the Resources section) and submit a request through JIRA or by sending an email to spark@sabre.com. Include both the icon and an image illustrating the context in which the icon will be used.
Developer Notes
Icons are included by adding the .spark-icon-* class to an element, where * is equal to the name of the icon. You may also specify .spark-icon--lg or .spark-icon--md to alter the size of the icon. Line icons are visible by default, but adding a class of .spark-icon--fill to an icon element will show the fill version of an icon.
Types of Icons
Actionable Icons
Actionable icons represent actions that can be taken and often appear without corresponding text. Examples include header icons, button icons, and icons in text input fields.
Size
Actionable icons should be 24px, with at least 12px padding on each side. This size and padding requirement provides a sufficient 48x48px touch area for mobile and tablet devices. Actionable icons should never be smaller than 24px.
Positioning
Actionable icons should align to the right of the containing element.
Color
Actionable icons may use Select Blue, Katana Black, or a contrast compliant color based on background.
Interactions
By using the line icons as the default state we are able to leverage the solid icon to improve usability when interacting with an actionable icon. By transitioning from line to solid we are informing the user he/she is interacting with the element. A couple examples you can reference are Date Selection and Toolbars.
For hover and on-click states, use a light to dark progression. The lighter state serves as the static default style while the darkest represents active. The hover state is an intermediary of the two. With Icon Buttons, for example, the icon’s background darkens on hover, indicating an action. The on-click state progresses one step further in the spectrum and darkens the background, indicating the action has been executed.
On dark backgrounds, use the inverse of the light to dark principle, working from dark to light.
Informational/Contextual Icons
Informational icons provide visual interest, make large content areas more scannable and typically appear next to a heading, label or other text.
Size
Informational icons should be 24px by default and should never be smaller than 16px. The filled styling should be used whenever an informational icon is less than 24px. In condensed environments, the icon my be 16px where the containing element is less than 48px tall (for example, in a Condensed Table).
Informational icons may be interchanged with their line equivalent when they accompany a section heading. In this application, icons adopt the size of the heading next to which they occur.
Positioning
Informational/contextual icons align to the left of their containing element.
Color
Informational icons will often adopt the color of the label they appear next to. They may also adopt status colors depending on their context, following the Color Usage Guidelines.
Interactions
As a result of contextual icons being static, they do not perpetuate hover and on-click states. However, when occurring in UI Components such as Tabs or Menus icons may adopt the colors of the labels they accompany.
Application Icons
Application icons are product-specific icons that appear on the user’s desktop, or home screen on mobile devices, and serve as the primary access point for the application. See Application Icon Templates in the Resource section.
