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.
Spark Icon Font
Streamlined 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 primary green, stand-out slate, 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.
Icons may violate the line vs. filled principle on dark backgrounds (examples include Footer and Header icons). In these instances, the filled icons are used to improve readability.
Use the light to dark principle outlined in Color Palette to help inform hover and on-click states throughout interfaces.
On dark backgrounds, use the inverse of the light to dark principle, working from dark to light. Refer to Footer and Header to see in action.
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 are never smaller than 16px. The default size, like actionable icons, is 24px. However, they may be 16px in condensed environments where the containing element is less than 48px tall. For example a Condensed Table
Generally contextual icons use the filled styling. However, these icons may be interchanged with their line equivalent when they accompany a section heading. In this application, icons adopt the size of the heading they occur next to.
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 [messaging colors] depending on their context.
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.
