Barmer Fractal

Overview Icons 

<div class="o-teaser teaser--bannermodule cs--b">

    <h4 class="teaser__headline">
        Übersicht Icons

    </h4>

    <div class="teaser__text teaser__text--richtext">
        <p>Auf dieser Seite finden Sie alle Icons</p>
    </div>

</div>

<style>
    .icons-overview {
        max-width: 1440px;
        margin: 90px 4.1666666667% 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, 9rem);
        grid-auto-rows: 9rem;
        justify-content: space-between;
        text-align: center;
    }

    .icons-overview>div {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }

    .icons-overview .a-icon {
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        transform: scale(1.5);
    }

    .icons-overview>div span {
        padding: 0 0.25rem;
    }

    .icons-overview>div span+span {
        font-style: italic;
        color: #9a9a9a;
    }
</style>

<div class="container icons-overview">

    <div>
        <i class="a-icon icon--account" aria-hidden="true"></i>
        <span>Account</span>
    </div>
    <div>
        <i class="a-icon icon--add" aria-hidden="true"></i>
        <span>Add</span>
    </div>
    <div>
        <i class="a-icon icon--alarm-off" aria-hidden="true"></i>
        <span>Alarm Off</span>
    </div>
    <div>
        <i class="a-icon icon--alarm-on" aria-hidden="true"></i>
        <span>Alarm On</span>
    </div>
    <div>
        <i class="a-icon icon--amniotic-fluid" aria-hidden="true"></i>
        <span>Amniotic Fluid</span>
    </div>
    <div>
        <i class="a-icon icon--arrow-back" aria-hidden="true"></i>
        <span>Arrow Back</span>
    </div>
    <div>
        <i class="a-icon icon--arrow-downward" aria-hidden="true"></i>
        <span>Arrow Downward</span>
    </div>

    <div>
        <i class="a-icon icon--arrow-external" aria-hidden="true"></i>
        <span>Arrow External</span>
    </div>
    <div>
        <i class="a-icon icon--arrow-forward" aria-hidden="true"></i>
        <span>Arrow Forward</span>
    </div>
    <div>
        <i class="a-icon icon--arrow-upward" aria-hidden="true"></i>
        <span>Arrow Upward</span>
    </div>
    <div>
        <i class="a-icon icon--attachment" aria-hidden="true"></i>
        <span>Attachment</span>
    </div>
    <div>
        <i class="a-icon icon--au-upload" aria-hidden="true"></i>
        <span>AU Upload</span>
    </div>

    <div>
        <i class="a-icon icon--baby" aria-hidden="true"></i>
        <span>Baby</span>
    </div>
    <div>
        <i class="a-icon icon--bar-chart" aria-hidden="true"></i>
        <span>Bar Chart</span>
    </div>
    <div>
        <i class="a-icon icon--barmer" aria-hidden="true"></i>
        <span>BARMER</span>
    </div>
    <div>
        <i class="a-icon icon--blood-pressure" aria-hidden="true"></i>
        <span>Blood Pressure</span>
    </div>
    <div>
        <i class="a-icon icon--blood-type" aria-hidden="true"></i>
        <span>Blood Type</span>
    </div>
    <div>
        <i class="a-icon icon--bold" aria-hidden="true"></i>
        <span>Bold</span>
    </div>
    <div>
        <i class="a-icon icon--bonus" aria-hidden="true"></i>
        <span>Bonus</span>
    </div>
    <div>
        <i class="a-icon icon--briefcase" aria-hidden="true"></i>
        <span>Briefcase</span>
    </div>
    <div>
        <i class="a-icon icon--calculator" aria-hidden="true"></i>
        <span>Rechner</span>
        <span>Calculator</span>
    </div>
    <div>
        <i class="a-icon icon--calendar" aria-hidden="true"></i>
        <span>Kalender</span>
        <span>Calendar</span>
    </div>
    <div>
        <i class="a-icon icon--calendar-off" aria-hidden="true"></i>
        <span>Calendar Off</span>
    </div>
    <div>
        <i class="a-icon icon--callservice" aria-hidden="true"></i>
        <span>Rückrufservice</span>
        <span>Service call</span>
    </div>

    <div>
        <i class="a-icon icon--camera" aria-hidden="true"></i>
        <span>Kamera</span>
        <span>Camera</span>
    </div>
    <div>
        <i class="a-icon icon--care" aria-hidden="true"></i>
        <span>Pflege</span>
        <span>Care</span>
    </div>
    <div>
        <i class="a-icon icon--chat" aria-hidden="true"></i>
        <span>Chat</span>
    </div>
    <div>
        <i class="a-icon icon--check" aria-hidden="true"></i>
        <span>Check</span>
    </div>
    <div>
        <i class="a-icon icon--check-alt" aria-hidden="true"></i>
        <span>Check Alt</span>
    </div>
    <div>
        <i class="a-icon icon--check-assistive" aria-hidden="true"></i>
        <span>Check Assistive</span>
    </div>
    <div>
        <i class="a-icon icon--check-circle" aria-hidden="true"></i>
        <span>Check Circle</span>
    </div>
    <div>
        <i class="a-icon icon--check-multiple" aria-hidden="true"></i>
        <span>Check Multiple</span>
    </div>
    <div>
        <i class="a-icon icon--chevron-right" aria-hidden="true"></i>
        <span>Chevron Right</span>
    </div>
    <div>
        <i class="a-icon icon--chevron-left" aria-hidden="true"></i>
        <span>Chevron Left</span>
    </div>

    <div>
        <i class="a-icon icon--circle" aria-hidden="true"></i>
        <span>Circle</span>
    </div>
    <div>
        <i class="a-icon icon--clipboard" aria-hidden="true"></i>
        <span>Clipboard</span>
    </div>
    <div>
        <i class="a-icon icon--clipboard-add" aria-hidden="true"></i>
        <span>Clipboard Add</span>
    </div>
    <div>
        <i class="a-icon icon--close" aria-hidden="true"></i>
        <span>Close</span>
    </div>
    <div>
        <i class="a-icon icon--close-assistive" aria-hidden="true"></i>
        <span>Close Assistive</span>
    </div>
    <div>
        <i class="a-icon icon--close-circle" aria-hidden="true"></i>
        <span>Close Circle</span>
    </div>
    <div>
        <i class="a-icon icon--collective-contract" aria-hidden="true"></i>
        <span>Kollektivvertrag</span>
        <span>Collective contract</span>
    </div>
    <div>
        <i class="a-icon icon--component" aria-hidden="true"></i>
        <span>Component</span>
    </div>
    <div>
        <i class="a-icon icon--contact" aria-hidden="true"></i>
        <span>Kontakt</span>
        <span>Contact</span>
    </div>
    <div>
        <i class="a-icon icon--contract" aria-hidden="true"></i>
        <span>Contract</span>
    </div>
    <div>
        <i class="a-icon icon--copy" aria-hidden="true"></i>
        <span>Copy</span>
    </div>
    <div>
        <i class="a-icon icon--credit-card" aria-hidden="true"></i>
        <span>Credit Card</span>
    </div>

    <div>
        <i class="a-icon icon--delete" aria-hidden="true"></i>
        <span>Delete</span>
    </div>
    <div>
        <i class="a-icon icon--development" aria-hidden="true"></i>
        <span>Development</span>
    </div>
    <div>
        <i class="a-icon icon--diamond" aria-hidden="true"></i>
        <span>Diamond</span>
    </div>
    <div>
        <i class="a-icon icon--doctor" aria-hidden="true"></i>
        <span>Arztpraxis</span>
        <span>Doctor</span>
    </div>
    <div>
        <i class="a-icon icon--doc-request" aria-hidden="true"></i>
        <span>Doc Request</span>
    </div>
    <div>
        <i class="a-icon icon--docs" aria-hidden="true"></i>
        <span>Docs</span>
    </div>
    <div>
        <i class="a-icon icon--document" aria-hidden="true"></i>
        <span>Dokument</span>
        <span>Document</span>
    </div>
    <div>
        <i class="a-icon icon--document-scanner" aria-hidden="true"></i>
        <span>Document Scanner</span>
    </div>
    <div>
        <i class="a-icon icon--doc-upload" aria-hidden="true"></i>
        <span>Doc Upload</span>
    </div>
    <div>
        <i class="a-icon icon--dot-circle" aria-hidden="true"></i>
        <span>Dot Circle</span>
    </div>
    <div>
        <i class="a-icon icon--dot" aria-hidden="true"></i>
        <span>Dot</span>
    </div>
    <div>
        <i class="a-icon icon--download" aria-hidden="true"></i>
        <span>Download</span>
    </div>
    <div>
        <i class="a-icon icon--edit" aria-hidden="true"></i>
        <span>Edit</span>
    </div>
    <div>
        <i class="a-icon icon--evening" aria-hidden="true"></i>
        <span>Evening</span>
    </div>
    <div>
        <i class="a-icon icon--expand-less" aria-hidden="true"></i>
        <span>Expand Less</span>
    </div>
    <div>
        <i class="a-icon icon--expand-more" aria-hidden="true"></i>
        <span>Expand More</span>
    </div>
    <div>
        <i class="a-icon icon--export" aria-hidden="true"></i>
        <span>Export</span>
    </div>
    <div>
        <i class="a-icon icon--external-link" aria-hidden="true"></i>
        <span>External Link</span>
    </div>

    <div>
        <i class="a-icon icon--facebook" aria-hidden="true"></i>
        <span>Facebook</span>
    </div>
    <div>
        <i class="a-icon icon--favorite" aria-hidden="true"></i>
        <span>Stern</span>
        <span>Star/Favorite</span>
    </div>
    <div>
        <i class="a-icon icon--favorite-filled" aria-hidden="true"></i>
        <span>Stern</span>
        <span>Favorite Filled</span>
    </div>
    <div>
        <i class="a-icon icon--fetus" aria-hidden="true"></i>
        <span>Fetus</span>
    </div>
    <div>
        <i class="a-icon icon--filter" aria-hidden="true"></i>
        <span>Filter</span>
    </div>
    <div>
        <i class="a-icon icon--firstaid" aria-hidden="true"></i>
        <span>Erste Hilfe</span>
        <span>First Aid</span>
    </div>
    <div>
        <i class="a-icon icon--flash" aria-hidden="true"></i>
        <span>Flash</span>
    </div>
    <div>
        <i class="a-icon icon--folder" aria-hidden="true"></i>
        <span>Folder</span>
    </div>
    <div>
        <i class="a-icon icon--forward" aria-hidden="true"></i>
        <span>Forward</span>
    </div>
    <div>
        <i class="a-icon icon--fotus" aria-hidden="true"></i>
        <span>Fotus</span>
    </div>
    <div>
        <i class="a-icon icon--gallery" aria-hidden="true"></i>
        <span>Gallery</span>
    </div>
    <div>
        <i class="a-icon icon--gitlab" aria-hidden="true"></i>
        <span>GitLab</span>
    </div>
    <div>
        <i class="a-icon icon--grid-view" aria-hidden="true"></i>
        <span>Grid View</span>
    </div>
    <div>
        <i class="a-icon icon--group" aria-hidden="true"></i>
        <span>Group</span>
    </div>

    <div>
        <i class="a-icon icon--health" aria-hidden="true"></i>
        <span>Health</span>
    </div>
    <div>
        <i class="a-icon icon--heart-action" aria-hidden="true"></i>
        <span>Heart Action</span>
    </div>
    <div>
        <i class="a-icon icon--help" aria-hidden="true"></i>
        <span>Help</span>
    </div>
    <div>
        <i class="a-icon icon--help-circle" aria-hidden="true"></i>
        <span>Help Circle</span>
    </div>
    <div>
        <i class="a-icon icon--home" aria-hidden="true"></i>
        <span>Home</span>
    </div>
    <div>
        <i class="a-icon icon--homeoffice" aria-hidden="true"></i>
        <span>Heimbüro</span>
        <span>Homeoffice</span>
    </div>
    <div>
        <i class="a-icon icon--hospital" aria-hidden="true"></i>
        <span>Krankenhaus</span>
        <span>Hospital</span>
    </div>
    <div>
        <i class="a-icon icon--hourglass" aria-hidden="true"></i>
        <span>Stundenglass</span>
        <span>Hourglass</span>
    </div>
    <div>
        <i class="a-icon icon--info" aria-hidden="true"></i>
        <span>Info</span>
    </div>

    <div>
        <i class="a-icon icon--instagram" aria-hidden="true"></i>
        <span>Instagram</span>
    </div>
    <div>
        <i class="a-icon icon--kompass" aria-hidden="true"></i>
        <span>Kompass</span>
    </div>
    <div>
        <i class="a-icon icon--language" aria-hidden="true"></i>
        <span>Language</span>
    </div>
    <div>
        <i class="a-icon icon--layout" aria-hidden="true"></i>
        <span>Layout</span>
    </div>
    <div>
        <i class="a-icon icon--leaf" aria-hidden="true"></i>
        <span>Leaf</span>
    </div>
    <div>
        <i class="a-icon icon--lightbulb" aria-hidden="true"></i>
        <span>Lightbulb</span>
    </div>
    <div>
        <i class="a-icon icon--linkedin" aria-hidden="true"></i>
        <span>LinkedIn</span>
    </div>

    <div>
        <i class="a-icon icon--list" aria-hidden="true"></i>
        <span>List</span>
    </div>
    <div>
        <i class="a-icon icon--location" aria-hidden="true"></i>
        <span>Location</span>
    </div>
    <div>
        <i class="a-icon icon--lock" aria-label="Geschützter Inhalt"></i>
        <span>Schloss (geschlossen)</span>
        <span>Lock (closed)</span>
    </div>

    <div>
        <i class="a-icon icon--logout" aria-hidden="true"></i>
        <span>Logout</span>
    </div>

    <div>
        <i class="a-icon icon--maximize" aria-hidden="true"></i>
        <span>Maximize</span>
    </div>
    <div>
        <i class="a-icon icon--medical-aids" aria-hidden="true"></i>
        <span>Hilfsmittel</span>
        <span>Medical aids</span>
    </div>
    <div>
        <i class="a-icon icon--medical-box" aria-hidden="true"></i>
        <span>Heilmittel</span>
        <span>Medical Box</span>
    </div>
    <div>
        <i class="a-icon icon--medical-remedies" aria-hidden="true"></i>
        <span>Medical Remedies</span>
    </div>
    <div>
        <i class="a-icon icon--menu" aria-hidden="true"></i>
        <span>Menu</span>
    </div>
    <div>
        <i class="a-icon icon--message" aria-hidden="true"></i>
        <span>Nachricht</span>
        <span>Message</span>
    </div>
    <div>
        <i class="a-icon icon--message-send" aria-hidden="true"></i>
        <span>Message Send</span>
    </div>
    <div>
        <i class="a-icon icon--microscope" aria-hidden="true"></i>
        <span>Microscope</span>
    </div>
    <div>
        <i class="a-icon icon--minimize" aria-hidden="true"></i>
        <span>Minimize</span>
    </div>
    <div>
        <i class="a-icon icon--minus" aria-hidden="true"></i>
        <span>Minus</span>
    </div>
    <div>
        <i class="a-icon icon--minus-alt" aria-hidden="true"></i>
        <span>Minus Alt</span>
    </div>
    <div>
        <i class="a-icon icon--money" aria-hidden="true"></i>
        <span>Geld</span>
        <span>Money</span>
    </div>
    <div>
        <i class="a-icon icon--more" aria-hidden="true"></i>
        <span>More</span>
    </div>
    <div>
        <i class="a-icon icon--morning" aria-hidden="true"></i>
        <span>Morning</span>
    </div>
    <div>
        <i class="a-icon icon--movement" aria-hidden="true"></i>
        <span>Movement</span>
    </div>
    <div>
        <i class="a-icon icon--night" aria-hidden="true"></i>
        <span>Night</span>
    </div>
    <div>
        <i class="a-icon icon--noon" aria-hidden="true"></i>
        <span>Noon</span>
    </div>
    <div>
        <i class="a-icon icon--notification" aria-hidden="true"></i>
        <span>Notification</span>
    </div>
    <div>
        <i class="a-icon icon--notification-off" aria-hidden="true"></i>
        <span>Notification Off</span>
    </div>
    <div>
        <i class="a-icon icon--parasol" aria-hidden="true"></i>
        <span>Sonnenschirm</span>
        <span>Parasol</span>
    </div>
    <div>
        <i class="a-icon icon--part-time" aria-hidden="true"></i>
        <span>Teilzeit</span>
        <span>Part time</span>
    </div>
    <div>
        <i class="a-icon icon--pause" aria-hidden="true"></i>
        <span>Pause</span>
    </div>
    <div>
        <i class="a-icon icon--pension" aria-hidden="true"></i>
        <span>Rente</span>
        <span>Pension</span>
    </div>
    <div>
        <i class="a-icon icon--person-add" aria-hidden="true"></i>
        <span>Person Add</span>
    </div>
    <div>
        <i class="a-icon icon--phone" aria-hidden="true"></i>
        <span>Mobiltelefon</span>
        <span>Phone</span>
    </div>
    <div>
        <i class="a-icon icon--pill" aria-hidden="true"></i>
        <span>Pille</span>
        <span>Pill</span>
    </div>
    <div>
        <i class="a-icon icon--placenta" aria-hidden="true"></i>
        <span>Placenta</span>
    </div>
    <div>
        <i class="a-icon icon--play" aria-hidden="true"></i>
        <span>Play</span>
    </div>
    <div>
        <i class="a-icon icon--plus" aria-hidden="true"></i>
        <span>Plus</span>
    </div>

    <div>
        <i class="a-icon icon--print" aria-hidden="true"></i>
        <span>Print</span>
    </div>
    <div>
        <i class="a-icon icon--profile" aria-hidden="true"></i>
        <span>Profile</span>
    </div>
    <div>
        <i class="a-icon icon--promotion" aria-hidden="true"></i>
        <span>Förderung</span>
        <span>Promotion</span>
    </div>
    <div>
        <i class="a-icon icon--qr-code" aria-hidden="true"></i>
        <span>QR-Code</span>
    </div>
    <div>
        <i class="a-icon icon--remove-circle" aria-hidden="true"></i>
        <span>Remove Circle</span>
    </div>
    <div>
        <i class="a-icon icon--reply-circle" aria-hidden="true"></i>
        <span>Reply Circle</span>
    </div>
    <div>
        <i class="a-icon icon--reply" aria-hidden="true"></i>
        <span>Reply</span>
    </div>
    <div>
        <i class="a-icon icon--restore" aria-hidden="true"></i>
        <span>Restore</span>
    </div>
    <div>
        <i class="a-icon icon--restore-assistive" aria-hidden="true"></i>
        <span>Restore Assistive</span>
    </div>
    <div>
        <i class="a-icon icon--rhesus" aria-hidden="true"></i>
        <span>Rhesus</span>
    </div>
    <div>
        <i class="a-icon icon--ruler" aria-hidden="true"></i>
        <span>Ruler</span>
    </div>
    <div>
        <i class="a-icon icon--search" aria-hidden="true"></i>
        <span>Search</span>
    </div>
    <div>
        <i class="a-icon icon--selector" aria-hidden="true"></i>
        <span>Selector</span>
    </div>
    <div>
        <i class="a-icon icon--security-basic" aria-hidden="true"></i>
        <span>Security Basic</span>
    </div>
    <div>
        <i class="a-icon icon--security-categories" aria-hidden="true"></i>
        <span>Security Categories</span>
    </div>
    <div>
        <i class="a-icon icon--security-confidential" aria-hidden="true"></i>
        <span>Security Confidential</span>
    </div>
    <div>
        <i class="a-icon icon--security-no-read" aria-hidden="true"></i>
        <span>Security No Read</span>
    </div>
    <div>
        <i class="a-icon icon--security-strict" aria-hidden="true"></i>
        <span>Security Strict</span>
    </div>
    <div>
        <i class="a-icon icon--send" aria-hidden="true"></i>
        <span>Send</span>
    </div>
    <div>
        <i class="a-icon icon--sentiment-negative" aria-hidden="true"></i>
        <span>Sentiment Negative</span>
    </div>
    <div>
        <i class="a-icon icon--sentiment-neutral" aria-hidden="true"></i>
        <span>Sentiment Neutral</span>
    </div>
    <div>
        <i class="a-icon icon--sentiment-positive" aria-hidden="true"></i>
        <span>Sentiment Positive</span>
    </div>
    <div>
        <i class="a-icon icon--settings" aria-hidden="true"></i>
        <span>Settings</span>
    </div>
    <div>
        <i class="a-icon icon--share" aria-hidden="true"></i>
        <span>Share</span>
    </div>
    <div>
        <i class="a-icon icon--sick-note" aria-hidden="true"></i>
        <span>Sick Note</span>
    </div>
    <div>
        <i class="a-icon icon--smart-device" aria-hidden="true"></i>
        <span>Smart Device</span>
    </div>

    <div>
        <i class="a-icon icon--sound" aria-hidden="true"></i>
        <span>Lautsprecher</span>
        <span>Sound</span>
    </div>
    <div>
        <i class="a-icon icon--square" aria-hidden="true"></i>
        <span>Square</span>
    </div>
    <div>
        <i class="a-icon icon--stroller" aria-hidden="true"></i>
        <span>Stroller</span>
    </div>
    <div>
        <i class="a-icon icon--sync" aria-hidden="true"></i>
        <span>Sync</span>
    </div>
    <div>
        <i class="a-icon icon--syringe" aria-hidden="true"></i>
        <span>Syringe</span>
    </div>

    <div>
        <i class="a-icon icon--target" aria-hidden="true"></i>
        <span>Target</span>
    </div>
    <div>
        <i class="a-icon icon--theme" aria-hidden="true"></i>
        <span>Theme</span>
    </div>
    <div>
        <i class="a-icon icon--tiktok" aria-hidden="true"></i>
        <span>TikTok</span>
    </div>
    <div>
        <i class="a-icon icon--time" aria-hidden="true"></i>
        <span>Time</span>
    </div>
    <div>
        <i class="a-icon icon--timer" aria-hidden="true"></i>
        <span>Timer</span>
    </div>
    <div>
        <i class="a-icon icon--tooth" aria-hidden="true"></i>
        <span>Tooth</span>
    </div>
    <div>
        <i class="a-icon icon--twitter" aria-hidden="true"></i>
        <span>Twitter</span>
    </div>
    <div>
        <i class="a-icon icon--unlock" aria-hidden="true"></i>
        <span>Schloss (offen)</span>
        <span>Lock (open)</span>
    </div>
    <div>
        <i class="a-icon icon--video-chat" aria-hidden="true"></i>
        <span>Videochat</span>
    </div>

    <div>
        <i class="a-icon icon--visibility" aria-hidden="true"></i>
        <span>Visibility</span>
    </div>
    <div>
        <i class="a-icon icon--visibility-off" aria-hidden="true"></i>
        <span>Visibility Off</span>
    </div>
    <div>
        <i class="a-icon icon--warning" aria-hidden="true"></i>
        <span>Warning</span>
    </div>
    <div>
        <i class="a-icon icon--warning-circle" aria-hidden="true"></i>
        <span>Warning Circle</span>
    </div>
    <div>
        <i class="a-icon icon--website" aria-hidden="true"></i>
        <span>Website</span>
    </div>
    <div>
        <i class="a-icon icon--weight" aria-hidden="true"></i>
        <span>Weight</span>
    </div>
    <div>
        <i class="a-icon icon--whatsapp" aria-hidden="true"></i>
        <span>Whatsapp</span>
    </div>
    <div>
        <i class="a-icon icon--x" aria-hidden="true"></i>
        <span>X</span>
    </div>
    <div>
        <i class="a-icon icon--xing" aria-hidden="true"></i>
        <span>Xing</span>
    </div>

    <div>
        <i class="a-icon icon--youtube" aria-hidden="true"></i>
        <span>YouTube</span>
    </div>

</div>
 
{{render '@bannermodule--b-secondary-btn' this.partials.iconsOverview merge=true}}

<style>
  .icons-overview {
    max-width: 1440px;
    margin: 90px 4.1666666667% 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 9rem);
    grid-auto-rows: 9rem;
    justify-content: space-between;
    text-align: center;
  }

  .icons-overview > div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
  }

  .icons-overview .a-icon {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    transform: scale(1.5);
  }

  .icons-overview > div span {
    padding: 0 0.25rem;
  }

  .icons-overview > div span + span {
    font-style: italic;
    color: #9a9a9a;
  }
</style>

<div class="container icons-overview">

  <div>
    {{ render '@icon--account' }}
    <span>Account</span>
  </div>
  <div>
    {{ render '@icon--add' }}
    <span>Add</span>
  </div>
  <div>
    {{ render '@icon--alarm-off' }}
    <span>Alarm Off</span>
  </div>
  <div>
    {{ render '@icon--alarm-on' }}
    <span>Alarm On</span>
  </div>
  <div>
    {{ render '@icon--amniotic-fluid' }}
    <span>Amniotic Fluid</span>
  </div>
  <div>
    {{ render '@icon--arrow-back' }}
    <span>Arrow Back</span>
  </div>
	<div>
	  {{ render '@icon--arrow-downward' }}
    <span>Arrow Downward</span>
  </div>

	<div>
	  {{ render '@icon--arrow-external' }}
    <span>Arrow External</span>
  </div>
	<div>
	  {{ render '@icon--arrow-forward' }}
    <span>Arrow Forward</span>
  </div>
	<div>
	  {{ render '@icon--arrow-upward' }}
    <span>Arrow Upward</span>
  </div>
	<div>
	  {{ render '@icon--attachment' }}
    <span>Attachment</span>
  </div>
	<div>
	  {{ render '@icon--au-upload' }}
    <span>AU Upload</span>
  </div>

	<div>
	  {{ render '@icon--baby' }}
    <span>Baby</span>
  </div>
	<div>
	  {{ render '@icon--bar-chart' }}
    <span>Bar Chart</span>
  </div>
	<div>
	  {{ render '@icon--barmer' }}
    <span>BARMER</span>
  </div>
	<div>
	  {{ render '@icon--blood-pressure' }}
    <span>Blood Pressure</span>
  </div>
	<div>
	  {{ render '@icon--blood-type' }}
    <span>Blood Type</span>
  </div>
	<div>
	  {{ render '@icon--bold' }}
    <span>Bold</span>
  </div>
	<div>
	  {{ render '@icon--bonus' }}
    <span>Bonus</span>
  </div>
	<div>
	  {{ render '@icon--briefcase' }}
    <span>Briefcase</span>
  </div>
	<div>
	  {{ render '@icon--calculator' }}
	  <span>Rechner</span>
	  <span>Calculator</span>
  </div>
	<div>
	  {{ render '@icon--calendar' }}
	  <span>Kalender</span>
	  <span>Calendar</span>
  </div>
	<div>
	  {{ render '@icon--calendar-off' }}
	  <span>Calendar Off</span>
  </div>
  <div>
    {{ render '@icon--callservice' }}
	  <span>Rückrufservice</span>
	  <span>Service call</span>
  </div>

	<div>
	  {{ render '@icon--camera' }}
	  <span>Kamera</span>
    <span>Camera</span>
  </div>
  <div>
    {{ render '@icon--care' }}
    <span>Pflege</span>
    <span>Care</span>
  </div>
	<div>
	  {{ render '@icon--chat' }}
	  <span>Chat</span>
  </div>
	<div>
	  {{ render '@icon--check' }}
	  <span>Check</span>
  </div>
	<div>
	  {{ render '@icon--check-alt' }}
	  <span>Check Alt</span>
	</div>
	<div>
	  {{ render '@icon--check-assistive' }}
	  <span>Check Assistive</span>
  </div>
	<div>
	  {{ render '@icon--check-circle' }}
	  <span>Check Circle</span>
  </div>
	<div>
	  {{ render '@icon--check-multiple' }}
	  <span>Check Multiple</span>
  </div>
	<div>
	  {{ render '@icon--chevron-right' }}
	  <span>Chevron Right</span>
  </div>
	<div>
	  {{ render '@icon--chevron-left' }}
	  <span>Chevron Left</span>
  </div>

  <div>
    {{ render '@icon--circle' }}
	  <span>Circle</span>
  </div>
  <div>
    {{ render '@icon--clipboard' }}
	  <span>Clipboard</span>
  </div>
  <div>
    {{ render '@icon--clipboard-add' }}
	  <span>Clipboard Add</span>
  </div>
  <div>
    {{ render '@icon--close' }}
	  <span>Close</span>
  </div>
  <div>
    {{ render '@icon--close-assistive' }}
	  <span>Close Assistive</span>
  </div>
  <div>
    {{ render '@icon--close-circle' }}
	  <span>Close Circle</span>
  </div>
  <div>
    {{ render '@icon--collective-contract' }}
    <span>Kollektivvertrag</span>
	  <span>Collective contract</span>
  </div>
  <div>
    {{ render '@icon--component' }}
	  <span>Component</span>
  </div>
  <div>
    {{ render '@icon--contact' }}
    <span>Kontakt</span>
    <span>Contact</span>
  </div>
  <div>
    {{ render '@icon--contract' }}
    <span>Contract</span>
  </div>
  <div>
    {{ render '@icon--copy' }}
    <span>Copy</span>
  </div>
  <div>
    {{ render '@icon--credit-card' }}
    <span>Credit Card</span>
  </div>

	<div>
	  {{ render '@icon--delete' }}
    <span>Delete</span>
  </div>
	<div>
	  {{ render '@icon--development' }}
    <span>Development</span>
  </div>
	<div>
	  {{ render '@icon--diamond' }}
    <span>Diamond</span>
  </div>
  <div>
    {{ render '@icon--doctor' }}
    <span>Arztpraxis</span>
    <span>Doctor</span>
  </div>
  <div>
    {{ render '@icon--doc-request' }}
    <span>Doc Request</span>
  </div>
  <div>
    {{ render '@icon--docs' }}
    <span>Docs</span>
  </div>
	<div>
	  {{ render '@icon--document' }}
    <span>Dokument</span>
    <span>Document</span>
  </div>
	<div>
	  {{ render '@icon--document-scanner' }}
    <span>Document Scanner</span>
  </div>
  <div>
    {{ render '@icon--doc-upload' }}
    <span>Doc Upload</span>
  </div>
	<div>
	  {{ render '@icon--dot-circle' }}
    <span>Dot Circle</span>
  </div>
	<div>
	  {{ render '@icon--dot' }}
    <span>Dot</span>
  </div>
	<div>
	  {{ render '@icon--download' }}
    <span>Download</span>
  </div>
	<div>
	  {{ render '@icon--edit' }}
    <span>Edit</span>
  </div>
	<div>
	  {{ render '@icon--evening' }}
    <span>Evening</span>
  </div>
	<div>
	  {{ render '@icon--expand-less' }}
    <span>Expand Less</span>
  </div>
	<div>
	  {{ render '@icon--expand-more' }}
    <span>Expand More</span>
  </div>
	<div>
	  {{ render '@icon--export' }}
    <span>Export</span>
  </div>
  <div>
    {{ render '@icon--external-link' }}
    <span>External Link</span>
  </div>

	<div>
	  {{ render '@icon--facebook' }}
    <span>Facebook</span>
  </div>
  <div>
    {{ render '@icon--favorite' }}
    <span>Stern</span>
    <span>Star/Favorite</span>
  </div>
  <div>
    {{ render '@icon--favorite-filled' }}
    <span>Stern</span>
    <span>Favorite Filled</span>
  </div>
	<div>
	  {{ render '@icon--fetus' }}
    <span>Fetus</span>
  </div>
	<div>
	  {{ render '@icon--filter' }}
    <span>Filter</span>
  </div>
	<div>
	  {{ render '@icon--firstaid' }}
    <span>Erste Hilfe</span>
    <span>First Aid</span>
	</div>
	<div>
	  {{ render '@icon--flash' }}
    <span>Flash</span>
  </div>
	<div>
	  {{ render '@icon--folder' }}
    <span>Folder</span>
  </div>
	<div>
	  {{ render '@icon--forward' }}
    <span>Forward</span>
  </div>
	<div>
	  {{ render '@icon--fotus' }}
    <span>Fotus</span>
  </div>
	<div>
	  {{ render '@icon--gallery' }}
    <span>Gallery</span>
  </div>
	<div>
	  {{ render '@icon--gitlab' }}
    <span>GitLab</span>
  </div>
  <div>
    {{ render '@icon--grid-view' }}
    <span>Grid View</span>
  </div>
  <div>
    {{ render '@icon--group' }}
    <span>Group</span>
  </div>

  <div>
    {{ render '@icon--health' }}
    <span>Health</span>
  </div>
  <div>
    {{ render '@icon--heart-action' }}
    <span>Heart Action</span>
  </div>
  <div>
    {{ render '@icon--help' }}
    <span>Help</span>
  </div>
  <div>
    {{ render '@icon--help-circle' }}
    <span>Help Circle</span>
  </div>
	<div>
	  {{ render '@icon--home' }}
    <span>Home</span>
  </div>
	<div>
	  {{ render '@icon--homeoffice' }}
    <span>Heimbüro</span>
    <span>Homeoffice</span>
  </div>
  <div>
    {{ render '@icon--hospital' }}
    <span>Krankenhaus</span>
    <span>Hospital</span>
  </div>
	<div>
	  {{ render '@icon--hourglass' }}
    <span>Stundenglass</span>
    <span>Hourglass</span>
	</div>
	<div>
	  {{ render '@icon--info' }}
    <span>Info</span>
  </div>

	<div>
	  {{ render '@icon--instagram' }}
	  <span>Instagram</span>
	</div>
	<div>
	  {{ render '@icon--kompass' }}
	  <span>Kompass</span>
  </div>
  <div>
    {{ render '@icon--language' }}
	  <span>Language</span>
  </div>
  <div>
    {{ render '@icon--layout' }}
	  <span>Layout</span>
  </div>
	<div>
	  {{ render '@icon--leaf' }}
	  <span>Leaf</span>
  </div>
	<div>
	  {{ render '@icon--lightbulb' }}
	  <span>Lightbulb</span>
  </div>
	<div>
	  {{ render '@icon--linkedin' }}
	  <span>LinkedIn</span>
	</div>

	<div>
	  {{ render '@icon--list' }}
	  <span>List</span>
  </div>
	<div>
	  {{ render '@icon--location' }}
	  <span>Location</span>
  </div>
	<div>
	  {{ render '@icon--lock' }}
    <span>Schloss (geschlossen)</span>
	  <span>Lock (closed)</span>
	</div>

	<div>
	  {{ render '@icon--logout' }}
	  <span>Logout</span>
  </div>

	<div>
	  {{ render '@icon--maximize' }}
	  <span>Maximize</span>
  </div>
	<div>
	  {{ render '@icon--medical-aids' }}
    <span>Hilfsmittel</span>
	  <span>Medical aids</span>
	</div>
  <div>
    {{ render '@icon--medical-box' }}
    <span>Heilmittel</span>
	  <span>Medical Box</span>
  </div>
  <div>
    {{ render '@icon--medical-remedies' }}
	  <span>Medical Remedies</span>
  </div>
  <div>
    {{ render '@icon--menu' }}
	  <span>Menu</span>
  </div>
  <div>
    {{ render '@icon--message' }}
    <span>Nachricht</span>
	  <span>Message</span>
  </div>
  <div>
    {{ render '@icon--message-send' }}
	  <span>Message Send</span>
  </div>
	<div>
	  {{ render '@icon--microscope' }}
	  <span>Microscope</span>
  </div>
	<div>
	  {{ render '@icon--minimize' }}
	  <span>Minimize</span>
  </div>
  <div>
    {{ render '@icon--minus' }}
	  <span>Minus</span>
  </div>
  <div>
    {{ render '@icon--minus-alt' }}
	  <span>Minus Alt</span>
  </div>
  <div>
    {{ render '@icon--money' }}
	  <span>Geld</span>
	  <span>Money</span>
  </div>
  <div>
    {{ render '@icon--more' }}
	  <span>More</span>
  </div>
  <div>
    {{ render '@icon--morning' }}
	  <span>Morning</span>
  </div>
  <div>
    {{ render '@icon--movement' }}
	  <span>Movement</span>
  </div>
  <div>
    {{ render '@icon--night' }}
	  <span>Night</span>
  </div>
  <div>
    {{ render '@icon--noon' }}
	  <span>Noon</span>
  </div>
  <div>
    {{ render '@icon--notification' }}
	  <span>Notification</span>
  </div>
  <div>
    {{ render '@icon--notification-off' }}
	  <span>Notification Off</span>
  </div>
  <div>
    {{ render '@icon--parasol' }}
	  <span>Sonnenschirm</span>
	  <span>Parasol</span>
  </div>
  <div>
    {{ render '@icon--part-time' }}
	  <span>Teilzeit</span>
	  <span>Part time</span>
  </div>
  <div>
    {{ render '@icon--pause' }}
	  <span>Pause</span>
  </div>
  <div>
    {{ render '@icon--pension' }}
	  <span>Rente</span>
	  <span>Pension</span>
  </div>
  <div>
    {{ render '@icon--person-add' }}
	  <span>Person Add</span>
  </div>
  <div>
    {{ render '@icon--phone' }}
    <span>Mobiltelefon</span>
	  <span>Phone</span>
  </div>
  <div>
    {{ render '@icon--pill' }}
    <span>Pille</span>
	  <span>Pill</span>
  </div>
  <div>
    {{ render '@icon--placenta' }}
	  <span>Placenta</span>
  </div>
	<div>
	  {{ render '@icon--play' }}
	  <span>Play</span>
	</div>
	<div>
	  {{ render '@icon--plus' }}
	  <span>Plus</span>
	</div>

	<div>
	  {{ render '@icon--print' }}
	  <span>Print</span>
	</div>
  <div>
    {{ render '@icon--profile' }}
	  <span>Profile</span>
  </div>
  <div>
    {{ render '@icon--promotion' }}
	  <span>Förderung</span>
	  <span>Promotion</span>
  </div>
  <div>
    {{ render '@icon--qr-code' }}
    <span>QR-Code</span>
  </div>
  <div>
    {{ render '@icon--remove-circle' }}
    <span>Remove Circle</span>
  </div>
  <div>
    {{ render '@icon--reply-circle' }}
    <span>Reply Circle</span>
  </div>
  <div>
    {{ render '@icon--reply' }}
    <span>Reply</span>
  </div>
	<div>
	  {{ render '@icon--restore' }}
    <span>Restore</span>
	</div>
	<div>
	  {{ render '@icon--restore-assistive' }}
    <span>Restore Assistive</span>
	</div>
	<div>
	  {{ render '@icon--rhesus' }}
    <span>Rhesus</span>
	</div>
	<div>
	  {{ render '@icon--ruler' }}
    <span>Ruler</span>
	</div>
  <div>
    {{ render '@icon--search' }}
    <span>Search</span>
  </div>
  <div>
    {{ render '@icon--selector' }}
    <span>Selector</span>
  </div>
	<div>
	  {{ render '@icon--security-basic' }}
    <span>Security Basic</span>
  </div>
	<div>
	  {{ render '@icon--security-categories' }}
    <span>Security Categories</span>
  </div>
	<div>
	  {{ render '@icon--security-confidential' }}
    <span>Security Confidential</span>
  </div>
	<div>
	  {{ render '@icon--security-no-read' }}
    <span>Security No Read</span>
  </div>
	<div>
	  {{ render '@icon--security-strict' }}
    <span>Security Strict</span>
	</div>
	<div>
	  {{ render '@icon--send' }}
    <span>Send</span>
	</div>
	<div>
	  {{ render '@icon--sentiment-negative' }}
    <span>Sentiment Negative</span>
  </div>
	<div>
	  {{ render '@icon--sentiment-neutral' }}
    <span>Sentiment Neutral</span>
	</div>
	<div>
	  {{ render '@icon--sentiment-positive' }}
    <span>Sentiment Positive</span>
  </div>
	<div>
	  {{ render '@icon--settings' }}
    <span>Settings</span>
	</div>
	<div>
	  {{ render '@icon--share' }}
    <span>Share</span>
	</div>
	<div>
	  {{ render '@icon--sick-note' }}
    <span>Sick Note</span>
  </div>
	<div>
	  {{ render '@icon--smart-device' }}
    <span>Smart Device</span>
	</div>

	<div>
	  {{ render '@icon--sound' }}
    <span>Lautsprecher</span>
    <span>Sound</span>
	</div>
  <div>
    {{ render '@icon--square' }}
    <span>Square</span>
  </div>
  <div>
    {{ render '@icon--stroller' }}
    <span>Stroller</span>
  </div>
  <div>
    {{ render '@icon--sync' }}
    <span>Sync</span>
  </div>
  <div>
    {{ render '@icon--syringe' }}
    <span>Syringe</span>
  </div>

  <div>
    {{ render '@icon--target' }}
    <span>Target</span>
  </div>
  <div>
    {{ render '@icon--theme' }}
    <span>Theme</span>
  </div>
  <div>
    {{ render '@icon--tiktok' }}
    <span>TikTok</span>
  </div>
  <div>
    {{ render '@icon--time' }}
    <span>Time</span>
  </div>
  <div>
    {{ render '@icon--timer' }}
    <span>Timer</span>
  </div>
  <div>
    {{ render '@icon--tooth' }}
    <span>Tooth</span>
  </div>
	<div>
	  {{ render '@icon--twitter' }}
    <span>Twitter</span>
	</div>
  <div>
    {{ render '@icon--unlock' }}
    <span>Schloss (offen)</span>
    <span>Lock (open)</span>
  </div>
	<div>
	  {{ render '@icon--video-chat' }}
    <span>Videochat</span>
	</div>

	<div>
	  {{ render '@icon--visibility' }}
    <span>Visibility</span>
	</div>
	<div>
	  {{ render '@icon--visibility-off' }}
    <span>Visibility Off</span>
	</div>
  <div>
    {{ render '@icon--warning' }}
    <span>Warning</span>
  </div>
  <div>
    {{ render '@icon--warning-circle' }}
    <span>Warning Circle</span>
  </div>
	<div>
	  {{ render '@icon--website' }}
    <span>Website</span>
	</div>
	<div>
	  {{ render '@icon--weight' }}
    <span>Weight</span>
	</div>
	<div>
	  {{ render '@icon--whatsapp' }}
    <span>Whatsapp</span>
	</div>
	<div>
	  {{ render '@icon--x' }}
    <span>X</span>
	</div>
	<div>
	  {{ render '@icon--xing' }}
    <span>Xing</span>
	</div>

	<div>
	  {{ render '@icon--youtube' }}
    <span>YouTube</span>
	</div>

</div>
 
{
  "switches": {
    "hasContactFlyout": "true"
  },
  "content": {
    "alertText": "Die Sitzung wurde erfolgreich verlängert"
  },
  "partials": {
    "sessionMetadata": {
      "content": {
        "expiredDialogId": "bm-dialog-session-expired",
        "expiringDialogId": "bm-dialog-session-expiring"
      }
    },
    "expiring": {
      "switches": {
        "hidden": true,
        "secondaryButton": true
      },
      "content": {
        "id": "bm-dialog-session-expiring",
        "text": "In <span class=\"js-session-timer\">5</span> Minuten endet ihre Sitzung und Sie werden automatisch ausgeloggt."
      },
      "partials": {
        "primaryButton": {
          "content": {
            "label": "Login verlängern"
          }
        },
        "secondaryButton": {
          "content": {
            "label": "Logout"
          }
        }
      }
    },
    "expired": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-dialog-session-expired"
      }
    },
    "modalVideo": {
      "switches": {
        "hidden": true
      },
      "content": {
        "id": "bm-video"
      },
      "viewtypes": {
        "specifier": "modal--video"
      },
      "partials": {
        "consent": {
          "viewtypes": {
            "specifier": "consent--in-modal"
          }
        },
        "videoFigure": {
          "switches": {
            "hasHeadline": false,
            "hasFigcaption": false,
            "hasVideo": false
          }
        }
      }
    },
    "iconsOverview": {
      "partials": {
        "teaser": {
          "switches": {
            "hasButton": false
          },
          "content": {
            "headline": "Übersicht Icons",
            "richtext": "<p>Auf dieser Seite finden Sie alle Icons</p>"
          }
        }
      }
    }
  }
}

No notes defined.