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.