Skip to main content

System icons are used as part of the user interface or part of a component. System icons are usually paired with text to further illustrate the text’s meaning.

Usage

Icon Name Usage
icon-arrow-down indicating moving downwards
icon-arrow-down-from-line indicating the ability to download or open a file in browser
icon-arrow-left indicating moving backwards
icon-arrow-right indicating a call-to-action
icon-arrow-rotate-left indicating an undo action
icon-arrow-up indicating moving upwards
icon-cell-phone-ringing indicating phone conversations or contact by phone
icon-checkmark indicating completion, success, safety, validity, or a selection
icon-checkmark-circle indicating completion, success, safety, validity, or a selection
icon-chevron-down indicating a closed dropdown or select menu
icon-chevron-left indicating moving backwards
icon-chevron-right indicating another level of navigation
icon-chevron-up indicating an open dropdown or select menu
icon-cog indicating account or product settings
icon-ellipsis indicating an overflow of items
icon-ellipsis-hollow indicating an overflow of items
icon-envelope indicating email or messaging
icon-exclamation-mark-circle indicating incomplete, error, danger, or invalidity
icon-facebook-logo indicating the Boston Scientific Facebook account
icon-funnel indicating filtering within a list of items
icon-i indicating more information or help
icon-instagram indicating the Boston Scientific Instagram account
icon-linkedin-logo indicating the Boston Scientific LinkedIn account
icon-magnifying-glass indicating the ability to search or filter
icon-person indicating a person or user
icon-play-hollow indicating a "play" action or a video
icon-plus-sign indicating a "add" action
icon-question-mark indicating a tooltip
icon-sliders-vertical indicating interface settings
icon-three-horizontal-lines indicating a menu
icon-twitter-logo indicating the Boston Scientific Twitter account
icon-x indicating the ability to close items or menus
icon-x-circle indicating the ability to close items or menus
icon-youtube-logo indicating the Boston Scientific YouTube account

Sizing

System icons are usually paired with text and will inherit that text’s size. On the rare occasion that icons are standalone, use text sizes to scale the icon. Please reach out to the Anatomy team if you have standalone icons.

Color

System icons are usually paired with text and will inherit that text’s color. On the rare occasion that icons are standalone, use an appropriate text color (usually neutral-00, action-primary-40, or neutral-100). Please reach out to the Anatomy team if you have standalone icons.

Note: the Stoplight component is the exception to the rule of matching the icon color with the icon text. This is because the stoplight icon colors are not accessible as text colors.

Need a new system icon?

Visit Icon guidelines for direction on creating a new icon.