Icons

An icon font is a web font that represents icons instead of letters and is primarily used as functional pictograms. They are an alternative to pure image files or CSS sprites. Since icon fonts are usually created as vector fonts, they can be graphically scaled and have a smaller file size than pixel icons.

The following code examples shows how to use badges:

<span class="icon icon--user"></span>

The following list describe all existing block/element/modifier classes of the component.

• .icon - required the class shows an icon, if no specific icon is set, is is an dummy icon
• .icon--{KEY} - the key define which icon is shown
• .icon--scale-{SCALE} - scale the size of an icon
• .icon--scale-{SCALE}-{SCREEN_SIZE} scale until the screen size
• .icon--rotate-{ROTATE} - rotate a icon
• .icon--spin - let them spin…

The variables are:

• KEY alert-add, alert-circle-badge, alert, anleihen, apps, arrow-double-left, arrow-double-right, arrow-down-1, arrow-down-2, arrow-down, arrow-kurs, arrow-left-1, arrow-left-2, arrow-left-right, arrow-left, arrow-right-1, arrow-right-2, arrow-right, arrow-sideways, arrow-up-1, arrow-up-2, arrow-up, bin, bitcoin, boersenplatz, calendar, capped-badge, caution, cfd, chart-candlestick, chart-gefuellt, chart-line, chart-ohlc, check, close, copy, depot-add, depot-sell, dot, dots, download-01, download, empty-star, esg-rating, etf, external-link, eye-hide, eye, fee-payment, filter, fire, fonds, forum, globel, heart, hebelprodukte, info, invalid, left-right, light-bulb, load, locked, logout, markets, menu, minus, minus2, missing, money, moodys-rating-arrow, moon, move-to-bottom, move-to-top, mynews, new-circle-jagged, news, newsletter, notice-add, notice, orderbook, oskar, overview, pencil, period-protected-badge, plus, plus2, podcast, print, quanto-badge, reverse-badge, rounded-five, rss, search, securitiesaccount, setting, smart-turbo-badge, social-media-facebook, social-media-instagram, social-media-linkedin, social-media-twitter, social-media-x, social-media-xing, social-media-youtube, social-media, sort-down, sort-up, sort, star-outline, star, stop-loss-badge, sun, tags-badge, trustpilot-star, unlocked, user, user2, valid, watchlist, x-turbo-badge, zero, zertifikate, zinsen, zoom-in, zoom-out
• SCALE x0.500, x0.625, x0.750, x0.875, x1.000, x1.125, x1.250, x1.375, x1.500
• ROTATE 90, 180, 270

List

This is the list of all usable icons. Click in the fowling list on an icon to copy that class name.

Modifier

Scale

A icon with this modifier scale up or down. This can be used with the class modifier .icon--scale-{SCALE}.

DEPRECATED the old {SCALE} was 0500, 0625, 0750, 0875, 1000, 1125, 1250, 1375, 1500

Spin

A icon with this modifier spins in an infinite loop.

Rotate

A icon with this modifier rotate.

Font Changes

The following examples shows how to change the icons on the fly only with icon modifier and Global Modifier.

How to add/edit/remove icons

See How to development.