Icons

Für Icons werden üblicherweise Icons aus Fontawesome benutzt. Das Designsystem liefert eine Auswahl dieser Icons als eigene Iconsyntax (bicon) mit, die bevorzugt benutzt werden sollen. Werden andere Icons benötigt müssen diese von der jeweiligen Applikation selbstständig eingebunden werden. Auch hierfür wird Fontawesome (Font Awesome) empfohlen.

Fontawesome icons are typically used for icons. The design system provides a selection of these icons as its own icon syntax (bicon), which should be used preferentially. If other icons are required, they must be integrated independently by the respective application. Fontawesome (Font Awesome) is recommended for this as well.

Bicons

.bicon.bicon-ICONNAME

Example

<i class="bicon bicon-arrow-right" aria-hidden="true"></i>

bars
search
times
arrow-right
arrow-left
arrow-up
arrow-down
chevron-right
chevron-left
chevron-up
chevron-down
universal-access
leichte-sprache
dgs

caret-left
caret-right
caret-up
caret-down
square-caret-left
square-caret-right
square-caret-up
square-caret-down
external-link
envelope
desktop
phone
mobile
tablet
fax
map
map-marker
calendar
clock

comment
comments
comment-dots
cart
lock
lock-open
print
edit
trash
heart
star-solid
star
star-half-stroke
ticket

user
user-check
login
logout

x-twitter
square-x-twitter
facebook
square-facebook
instagram
square-instagram
whatsapp
square-whatsapp
xing
square-xing
youtube
square-youtube
snapchat
square-snapchat
printerest
square-printerest
linkedin
square-linkedin
flickr
mastodon
bluesky
square-bluesky
threads
square-threads

download
play
pause
sliders
info
plus
id-card
plane
train
building
file
lightbulb
gear
wrench
triangle-exclamation
rocket
seeding
landmark
circle
info-circle
circle-question
check
check-circle
times-circle
maximize
quote-left
circle-down
hourglass
euro-sign

Traffic icons

.traffic-icon.traffic-icon-name_of_icon

Example

<i class="traffic-icon traffic-icon-ubahn" title="U-Bahn" aria-label="U-Bahn"></i>

ubahn
bus
sbahn
tram
faehre
metrobus
bahn

Deprecated icons

Deprecated

Dont use following icons anymore. The pre 2021 Markup was generated with Imperia iconsyntax and will not be supported in the future.

Misc icons

Zum Intranet Verweis auf eine Intranet-Seite, die nur aus dem Landesnetz aus erreichbar ist. (Sollte vermieden werden auf Internet-Seiten, da das zu Frust beim Nutzer führen kann).
Zum Internet Verweis auf eine Internet-Seite.
Verweis auf ein PDF-Dokument
Link zu Landesinhalt Landesinhalt, Link verweist auf offizielle Landesinhalte.
Digital signierte Email Verweis auf eine E-Mailadresse, die für den Empfang von signierten E-Mail geeignet ist.
Tickets / Link zu Kartenverkäufen
Audit Beruf und Familie
EC-Zahlung
Lexikon
Appstore Icon von Apple
Google Play Icon
Leichte Sprache
Home Icon
Gebärdensprache
Leichte Sprache