Font Awesome Icons

We use the FontAwesome Classic Pack for all of our icons, however some of our icons are custom-made and are not part of the official FontAwesome Pro Font Family.

• See #Custom Icons below for a complete overview of the custom icons included in our kit and how to use them.
• See #FontAwesome Kit Integration below for installation instructions and configuration details.
• Our Custom DuoTone Icons are available as SVGs, since they are not (yet) part of the kit.

Font Awesome Style Variants

These variants allow you to toggle the visual weight and style of the same icon using Font Awesome's standard class prefix system. We currently use the following styles: fa-solid, fa-regular, fa-duotone - and sometimes, for very large icons fa-light:

Style Name	Preview	Icon Class	Code Snippet
Solid		fa-solid or fas	<i class="fas fa-star"></i>
Regular		fa-regular or far	<i class="far fa-star"></i>
Duotone		fa-duotone or fad	<i class="fad fa-star"></i>
Light		fa-light or fal	<i class="fal fa-star"></i>

Custom Icons

Use the following classes to include custom icons in your project:
.fa-kit.fa-[icon-class-name]

Name	Icon	Icon Class
Abfüllung		fa-abfuellung[-regular]
Archiv		fa-archiv[-regular]
Augentropfen		fa-augentropfen[-regular]
DAC/NRF		fa-dac-nrf[-regular]
Defektur		fa-defektur[-regular]
E-Rezept		fa-erezept[-regular]
Fertigarzneimittel (FAM)		fa-fam[-regular]
Flüssigkeit		fa-fluessigkeit[-regular]
LabXpert Logo		fa-logo-labxpert
Packmittel		fa-packmittel[-regular]
Pulver		fa-pulver[-regular]
Schmelzpunktbestimmer		fa-schmelzpunktbestimmer[-regular]
Tee		fa-tee[-regular]
TOPITEC		fa-topitec
Unguator		fa-unguator
Zäpfchen		fa-zaepfchen[-regular]

Icon Size Modifier Classes

See Sizing Icons for more.

You can use the following classes to change the size of the icons:
.fa-4x, .fa-3x,, .fa-2x, .fa-1-5x, .fa-1x

Show Code

<i class="fas fa-circle-info fa-4x"></i>
<i class="fas fa-circle-info fa-3x"></i>
<i class="fas fa-circle-info fa-2x"></i>
<i class="fas fa-circle-info fa-1-5x"></i>

Icon Helper Classes

See Styling with Font Awesome for more.

• .fa-rotate-[90, 180] or specific value: .fa-rotate-by+ style="--fa-rotate-angle: 45deg;"

• .fa-flip-[horizontal, vertical, both]

• .fa-fw - for fixed widths

Icon Stacks

.fa-stack > .fa-stack-2x + .fa-stack-1x

Show Code

<span class="fa-stack" aria-hidden="true">
    <i class="fa-solid fa-circle fa-stack-2x"></i>
    <i class="fa-solid fa-user fa-stack-1x fa-inverse"></i>
</span>

Icon Animations

See Animations with Font Awesome for more.

.fa-spinner / .fa-beat / .fa-bounce / .fa-beat-fade

Show Code

<i class="far fa-sync fa-spin"></i>
<i class="fas fa-circle-plus fa-beat"></i>
<i class="fas fa-heart fa-bounce"></i>
<i class="fas fa-heart fa-beat-fade"></i>

Icon Styleguide

This table provides the standard icon mapping for common UI actions used across the project.

Icon Mapping Reference

Action / Context	Preview	Icon Class	HTML Implementation
Search		fa-magnifying-glass	<i class="fas fa-magnifying-glass" aria-hidden="true"></i>
Edit		fa-pen	<i class="fas fa-pen" aria-hidden="true"></i>
Save / Confirm		fa-check	<i class="fas fa-check" aria-hidden="true"></i>
Cancel / Close		fa-xmark	<i class="fas fa-xmark" aria-hidden="true"></i>
Add / Create		fa-plus	<i class="fas fa-plus" aria-hidden="true"></i>
Delete / Remove		fa-trash	<i class="fas fa-trash" aria-hidden="true"></i>
Download		fa-download	<i class="fas fa-download" aria-hidden="true"></i>
Reload / Sync		fa-rotate	<i class="fas fa-rotate" aria-hidden="true"></i>
Undo		fa-rotate-left	<i class="fas fa-rotate-left" aria-hidden="true"></i>
Settings / Tools		fa-gear	<i class="fas fa-gear" aria-hidden="true"></i>
More Actions		fa-ellipsis-vertical	<i class="fas fa-ellipsis-vertical" aria-hidden="true"></i>
Expand / Open		fa-caret-right	<i class="fas fa-caret-right" aria-hidden="true"></i>
Collapse / Close		fa-caret-down	<i class="fas fa-caret-down" aria-hidden="true"></i>
Warning / Alert		fa-triangle-exclamation	<i class="fas fa-triangle-exclamation" aria-hidden="true"></i>
Information		fa-circle-info	<i class="fas fa-circle-info" aria-hidden="true"></i>
Help / Question		fa-circle-question	<i class="fas fa-circle-question" aria-hidden="true"></i>
History		fa-clock-rotate-left	<i class="fas fa-clock-rotate-left" aria-hidden="true"></i>
Reset		fa-arrow-rotate-left	<i class="fas fa-arrow-rotate-left" aria-hidden="true"></i>
User Profile		fa-circle-user	<i class="fas fa-circle-user" aria-hidden="true"></i>
Login		fa-right-to-bracket	<i class="fas fa-right-to-bracket" aria-hidden="true"></i>
Logout		fa-right-from-bracket	<i class="fas fa-right-from-bracket" aria-hidden="true"></i>
Contact / Mail		fa-envelope	<i class="fas fa-envelope" aria-hidden="true"></i>

FontAwesome Kit Integration

This project uses a custom FontAwesome Pro Kit: fontawesome.com/kits/dd3a73c5b9/customicons.
Follow the steps below to configure, install, and use the icons.

Installation Instructions

Before installing, you must configure access by creating a .npmrc file in your project root. Refer to the FontAwesome Kit Setup Guide for your specific credentials (see 1Password for login credentials).

To add the kit to a new project or update to the latest version, use the following commands:

# Install the latest version
npm install --save '@awesome.me/kit-dd3a73c5b9@latest'

# Update the existing kit
npm update '@awesome.me/kit-dd3a73c5b9'

SCSS Variables & Selectors

Font Awesome SCSS Variables

In the SCSS-files you can use the $fa-icon-map if you need a font-awesome icon as pseudo-element. Common icons are included in this map, so you don't have to look for the unicode. Just use #{$fa-icon-map['icon-name']} to get the unicode for the icon you need.

$fa-icon-map: (
  arrow-left: '\f060',
  arrow-right: '\f061',
  arrow-down: '\f063',
  arrow-down-to-line: '\f33d',
  arrow-up: '\f062'
  ...
);

Font Awesome SCSS Selectors

If you need to target all font-awesome icons in your SCSS, you can use the #{$fa-selector} or #{$fa-icon-selector} variables. This is especially useful for global styles or overrides.

// selector variables
// use like this: #{$fa-selector}
$fa-selector: "[class^=" fa "]";
$fa-icon-selector: "[class^=" fa "]::before";