Icon

Prototype

HTML
View
Context
Assets
Info
Notes


        
        
            <!-- Default -->
<i class="atm-icon  far fa-external-link   "></i>


        
            <!-- Brand icon -->
<i class="atm-icon  fab fa-x-twitter   "></i>


        
            <!-- 90° rotated icon -->
<i class="atm-icon  far fa-external-link fa-rotate-90  "></i>


        
            <!-- 180° rotated icon -->
<i class="atm-icon  far fa-external-link fa-rotate-180  "></i>


        
            <!-- 270° rotated icon -->
<i class="atm-icon  far fa-external-link fa-rotate-270  "></i>


        
            <!-- Horizontally flipped icon -->
<i class="atm-icon  far fa-external-link fa-flip-horizontal  "></i>


        
            <!-- Vertically flipped icon -->
<i class="atm-icon  far fa-external-link fa-flip-vertical  "></i>


        
            <!-- Spinning icon -->
<i class="atm-icon  far fa-external-link fa-spin  "></i>


        
            <!-- Pulse icon -->
<i class="atm-icon  far fa-external-link fa-pulse  "></i>


        
            <!-- XS icon -->
<i class="atm-icon  far fa-external-link  fa-xs "></i>


        
            <!-- SM icon -->
<i class="atm-icon  far fa-external-link  fa-sm "></i>


        
            <!-- LG icon -->
<i class="atm-icon  far fa-external-link  fa-lg "></i>


        
            <!-- 2X icon -->
<i class="atm-icon  far fa-external-link  fa-2x "></i>


        
            <!-- 3X icon -->
<i class="atm-icon  far fa-external-link  fa-3x "></i>


        
            <!-- 4X icon -->
<i class="atm-icon  far fa-external-link  fa-4x "></i>


        {{#if icon}}
    {{#if style}}
        <i class="atm-icon {{modifier}} {{style}} {{icon}} {{rotation}} {{size}} {{#if fixedWidth}}fa-fw{{/if}}"></i>
    {{/if}}
{{/if}}


        
        
            /* Default */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* Brand icon */
{
  "icon": "fa-x-twitter",
  "style": "fab",
  "size": "",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* 90° rotated icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-rotate-90",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* 180° rotated icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-rotate-180",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* 270° rotated icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-rotate-270",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* Horizontally flipped icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-flip-horizontal",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* Vertically flipped icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-flip-vertical",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* Spinning icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-spin",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* Pulse icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "",
  "rotation": "fa-pulse",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* XS icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-xs",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* SM icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-sm",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* LG icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-lg",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* 2X icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-2x",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* 3X icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-3x",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}


        
            /* 4X icon */
{
  "icon": "fa-external-link",
  "style": "far",
  "size": "fa-4x",
  "rotation": "",
  "fixedWidth": false,
  "modifier": ""
}

File:

Content:
.atm-icon { }
URL: /components/raw/icon/icon.css
Filesystem Path: src\components\02-atoms\icon\icon.css
Size: 23 Bytes

Handle: @icon
Variants (15): Default , Brand icon , 90° rotated icon , 180° rotated icon , 270° rotated icon , Horizontally flipped icon , Vertically flipped icon , Spinning icon , Pulse icon , XS icon , SM icon , LG icon , 2X icon , 3X icon , 4X icon
Preview:
- With layout
- Component only
Filesystem Path: src\components\02-atoms\icon\icon.hbs
Referenced by (72): @button-primary, @button-primary--icon-md, @button-primary--icon-left-md, @button-primary--icon-only-md, @button-secondary, @button-secondary--without-icon, @input, @input--disabled, @input--invalid, @input--valid, @input--password, @input--icon, @link, @link--with-icon, @nav-link, @nav-link--with-icon, @pager, @play, @prev-next, @prev-next--next, @slide, @tag, @tag--link-active, @tag--link-sm, @tag--link-sm-active, @alert, @breadcrumbs, @card-extended, @card-extended--contact-person, @card-extended--news, @card-extended--overview-header-primary, @card-extended--overview-header-secondary, @card-extended--sdg, @card-extended--initiative, @download, @faqs, @header-desktop-nav, @header-desktop-nav--megamenu, @header-mobile-nav, @header-search, @icon-tag, @identifier, @image-slider, @language-select, @mega-menu, @mega-menu--grid, @mega-menu--marketing, @quote, @search-toggle, @segment-slider, @service-list, @slider, @social-feed, @social-media, @social-media--vertical, @social-media--vertical-xs, @specs-list, @submenu, @usp-list, @article-block, @countdown-block, @grid-block, @hero, @hero--heading, @hero--image, @hero--image-compliments, @hero--video, @hero--fullwidth-video, @hero--slider, @social-feed-block, @vacancy-block, @vacancy-overview

The icon component uses Font Awesome for displaying icons. The icon component supports different style, rotation and size variants.

Style variants

far : regular icons, which is the default value
fab : brand icons
fas : solid icons
fal : light icons
fad : duotone icons

Rotation variants

fa-rotate-90 : rotates the icon 90 degrees clockwise
fa-rotate-180 : rotates the icon 180 degrees clockwise
fa-rotate-270 : rotates the icon 270 degrees clockwise
fa-flip-horizontal : flips the icon horizontally
fa-flip-vertical : flips the icon vertically
fa-spin : spins the icon
fa-pulse : rotates the icon in 8 steps

Size variants

fa-xs : extra small
fa-ms : medium small
fa-lg : large
fa-2x : double size
fa-3x : triple size
fa-4x : quadruple size