Warning
Not modifiable It is mandatory to maintain the appearance and behavior of these components.
Icons Icons are an essential element of design and are also known as pictograms. They can stand individually, be displayed together, or be part of an element.
They support the understanding of an information or function. Symbols are easier to read than text. They are mainly used to identify a function. It can also be used as an infographic or illustration.
The appearance of the icon depends on the usage or context. There’s also a positive and negative version to layout on a light or dark background. Icons have an original size of 24x24px . The size has to follow the rule of 8 (8, 16, 24, 32, …). Icons can be used for status , as links , as navigation , to support another element (in alerts, buttons, input-fields, etc.) or as illustration . Icons with a link have the same styling as text-links – on light as well as dark background. States Attributes Image default icon-color: brand-primary-base hover / focus icon-color: brand-secondary-base disabled icon-color: gray-lighter
Informs about a changed status, for example the current items in the shopping cart. The number of items can be displayed by addons. States Attributes Image default icon-color: basic-black hover / focus icon-color: brand-primary-base active icon-color: brand-primary-basebut the icon gets "…-solid" disabled icon-color: gray-lighter
Icons that specify a direction. Icons symbolizing the current location. States Attributes Image default / active icon-color: basic-black hover / focus icon-color: brand-primary-base disabled icon-color: gray-lighter
Icons symbolize a special expression, e.g. message about incorrect input or correct input, legal information, etc. Icons that support textual information visually. Name Icon Purpose conversation-ballons feedback exclamation-circle attention exclamation-triangle danger hook-circle check, ok, success information-circle information questionmark-circle
These icons are used for interactions. The user remains in the current position and the icon triggers an action. The icon offers the user a function, action or position. Name Icon Purpose arrow-left-circle back arrow-right-circle next arrows-expand enlarge, full screen arrows-vertical sort bars-horizontal menu calendar date, appointment camera photo clock time cogwheel settings controls settings, slider crosshair locate download save eye-close hide eye-open show file paper fingerprint identity house home hook check, ok magnifier-plus zoom in magnifier-minus zoom out magnifier zoom map-marker location map placeholder printer print social-share sync refresh, rotate upload
These icons are used for navigation – the user is redirected from the current position. Name Icon Purpose arrow-down down, expand arrow-left left, back arrow-right right, forward arrow-up up, collapse cross close, quit, abort undo
Icons that can change their appearance after an activation of the user (e.g. add to wishlist, like, set reminder). Only these icons switch from the regular outline look to a solid look when active. Name Icon Purpose bell-regular alarm, reminder bell-solid alarm, reminder bookmark-regular chapter bookmark-solid chapter star-regular favorite star-solid favorite
These icons are used for multimedia control interfaces e.g a video player. Name Icon Purpose skip-ahead-15-seconds fast forward, control, skip skip-back-15-seconds fast rewind, control, skip back skip-ahead-circle fast forward, control, skip back-circle previous, back mute no sound, voiceless media, no volume next-circle fast forward, next pause-circle pause media play-circle play, play media skip-back-circle stop-circle unmute hold, break, stop next_alt next pause_alt pause media play_alt play, play media skip_alt next stop_alt hold, break, stop
The SCHWARZ universe contains plenty of other icons that are not available in our design system and frontend framework. The naming of SVG files also may differ from the SCHWARZ standard because of the general usage of icons in our product. For more icons and further details get in touch with Schwarz brandmangement . "Icons" | Videoplayer (16): skip-ahead-15-seconds, skip-ahead-circle, skip-back-15-seconds, back-circle, mute, next-circle, pause-circle, play-circle, skip-back-circle, stop-circle, unmute, nextalt, pause alt, playalt, skip alt, stop_alt "Icon" | Changed symbols: with layer-style settings "Icons" | Added symbol: "interaction" (house) 
