Deprecated - contains information about version 17 of the IDS librarySeedesign.if.eufor the latest documentation

CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window

Icons help the user find a desired action or piece of information relevant to their task. Icons can be used to mark a type of notification, status or validation, an action link or button, a type of insurance or sometimes (but rarely) an action button.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/icons@17.0.30-alpha.8

Table of Contents

Edit this section, Opens in new window

Usage

All of the icons can be used as background icons, providing the following syntax is used:

<span
    style="display:block; height: 16px; width: 16px;"
    aria-hidden="true"
    class="if icon [ui|symbol|products|coverage] <Icon Name> [white|brown|blue]"
></span>

The element used needs to be a block element, with a set size. If the size is anything other than 16px, you also need to set the correct background-size.

<span
    style="display:block; height: 24px; width: 24px; background-size: 24px 24px;"
    aria-hidden="true"
    class="if icon [ui|symbol|products|coverage] <Icon Name> [white|brown|blue]"
></span>

Here you will see the an example reference of exposed classnames to be utilised as helper classes for your html styling.

For a full list, see the Tokens section.

NOTE!

These are not class helpers to be used freely. Follow our design guidelines on how to use the icons correctly.

Icon class helpers Example
class="if icon product caravan"

If you want different colors:

<span class="if icon product caravan [blue|white|brown|disabled]"> </span>
Edit this section, Opens in new window

Mixins

Here you will see the an example reference of exposed mixins to be utilised for your styling.

For a full list, see the Tokens section.

“A mixin can be used as a standalone helper, or you can pass values as arguments to make it extra flexible.”

All icon mixins are named the same, but not used with the same syntax! See usage sections below!
Name Icon
IDS_ICONS_Icon_Product_Caravan
Usage with Stylus
.myCustomIconClass
    display block
    IDS_ICONS_Icon_Ui_Return()

If you want different colors:

.myCustomIconClass
    display block
    IDS_ICONS_Icon_Ui_Return[_White

|
_Blue
|
_Brown
|
_Disabled
]
()
Usage with Sass/Scss
.myCustomIconClass{
    display:block;
    @include IDS_ICONS_Icon_Ui_Return;

}

If you want different colors:

.myCustomIconClass{
    display:block;
    @include IDS_ICONS_Icon_Ui_Return [ _White | _Blue | _Brown | _Disabled ];

}
Usage with Less
.myCustomIconClass {
    display: block;
    .IDS_ICONS_Icon_Ui_Return();
}

If you want different colors:

.myCustomIconClass{
    display:block;

    .IDS_ICONS_Icon_Ui_Return[_White|_Blue| _Brown|_Disabled ]();

}
Edit this section, Opens in new window

Tokens

All of the tokens can be used as preprocessor variables

Icons

Coverage icons

Token Mixin Class Example
$if-icon-coverage-animal IDS_ICONS_Icon_Coverage_Animal .if.icon.coverage.animal
$if-icon-coverage-bagage-delay IDS_ICONS_Icon_Coverage_Bagage_delay .if.icon.coverage.bagage-delay
$if-icon-coverage-boat-collision IDS_ICONS_Icon_Coverage_Boat_collision .if.icon.coverage.boat-collision
$if-icon-coverage-boat-grounding IDS_ICONS_Icon_Coverage_Boat_grounding .if.icon.coverage.boat-grounding
$if-icon-coverage-boat-sinking IDS_ICONS_Icon_Coverage_Boat_sinking .if.icon.coverage.boat-sinking
$if-icon-coverage-building-damage IDS_ICONS_Icon_Coverage_Building_damage .if.icon.coverage.building-damage
$if-icon-coverage-candle IDS_ICONS_Icon_Coverage_Candle .if.icon.coverage.candle
$if-icon-coverage-car-collision IDS_ICONS_Icon_Coverage_Car_collision .if.icon.coverage.car-collision
$if-icon-coverage-car-fire IDS_ICONS_Icon_Coverage_Car_fire .if.icon.coverage.car-fire
$if-icon-coverage-car-vandalism IDS_ICONS_Icon_Coverage_Car_vandalism .if.icon.coverage.car-vandalism
$if-icon-coverage-care IDS_ICONS_Icon_Coverage_Care .if.icon.coverage.care
$if-icon-coverage-disability IDS_ICONS_Icon_Coverage_Disability .if.icon.coverage.disability
$if-icon-coverage-engine IDS_ICONS_Icon_Coverage_Engine .if.icon.coverage.engine
$if-icon-coverage-evacuation IDS_ICONS_Icon_Coverage_Evacuation .if.icon.coverage.evacuation
$if-icon-coverage-faq-bubble IDS_ICONS_Icon_Coverage_Faq_bubble .if.icon.coverage.faq-bubble
$if-icon-coverage-flight-cancelled IDS_ICONS_Icon_Coverage_Flight_cancelled .if.icon.coverage.flight-cancelled
$if-icon-coverage-flight-delayed IDS_ICONS_Icon_Coverage_Flight_delayed .if.icon.coverage.flight-delayed
$if-icon-coverage-fridge IDS_ICONS_Icon_Coverage_Fridge .if.icon.coverage.fridge
$if-icon-coverage-glass-damage IDS_ICONS_Icon_Coverage_Glass_damage .if.icon.coverage.glass-damage
$if-icon-coverage-heating-system IDS_ICONS_Icon_Coverage_Heating_system .if.icon.coverage.heating-system
$if-icon-coverage-law IDS_ICONS_Icon_Coverage_Law .if.icon.coverage.law
$if-icon-coverage-lost-bagage IDS_ICONS_Icon_Coverage_Lost_bagage .if.icon.coverage.lost-bagage
$if-icon-coverage-misfuellling IDS_ICONS_Icon_Coverage_Misfuellling .if.icon.coverage.misfuellling
$if-icon-coverage-parking IDS_ICONS_Icon_Coverage_Parking .if.icon.coverage.parking
$if-icon-coverage-power-failure IDS_ICONS_Icon_Coverage_Power_failure .if.icon.coverage.power-failure
$if-icon-coverage-rental-car IDS_ICONS_Icon_Coverage_Rental_car .if.icon.coverage.rental-car
$if-icon-coverage-sanitation IDS_ICONS_Icon_Coverage_Sanitation .if.icon.coverage.sanitation
$if-icon-coverage-school IDS_ICONS_Icon_Coverage_School .if.icon.coverage.school
$if-icon-coverage-small-child IDS_ICONS_Icon_Coverage_Small_child .if.icon.coverage.small-child
$if-icon-coverage-snow IDS_ICONS_Icon_Coverage_Snow .if.icon.coverage.snow
$if-icon-coverage-tooth IDS_ICONS_Icon_Coverage_Tooth .if.icon.coverage.tooth
$if-icon-coverage-tv-stand IDS_ICONS_Icon_Coverage_Tv_stand .if.icon.coverage.tv-stand
$if-icon-coverage-vermin IDS_ICONS_Icon_Coverage_Vermin .if.icon.coverage.vermin
$if-icon-coverage-wallet IDS_ICONS_Icon_Coverage_Wallet .if.icon.coverage.wallet
$if-icon-coverage-wheel IDS_ICONS_Icon_Coverage_Wheel .if.icon.coverage.wheel
$if-icon-coverage-windshield-damage IDS_ICONS_Icon_Coverage_Windshield_damage .if.icon.coverage.windshield-damage
$if-icon-coverage-world-pin IDS_ICONS_Icon_Coverage_World_pin .if.icon.coverage.world-pin

Product icons

Token Mixin Class Example
$if-icon-product-accident IDS_ICONS_Icon_Product_Accident .if.icon.product.accident
$if-icon-product-adult-50-plus IDS_ICONS_Icon_Product_Adult_50_plus .if.icon.product.adult-50-plus
$if-icon-product-adult-60-plus IDS_ICONS_Icon_Product_Adult_60_plus .if.icon.product.adult-60-plus
$if-icon-product-ai IDS_ICONS_Icon_Product_Ai .if.icon.product.ai
$if-icon-product-antique-car IDS_ICONS_Icon_Product_Antique_car .if.icon.product.antique-car
$if-icon-product-apartment IDS_ICONS_Icon_Product_Apartment .if.icon.product.apartment
$if-icon-product-assistance IDS_ICONS_Icon_Product_Assistance .if.icon.product.assistance
$if-icon-product-atv IDS_ICONS_Icon_Product_Atv .if.icon.product.atv
$if-icon-product-au-pair IDS_ICONS_Icon_Product_Au_pair .if.icon.product.au-pair
$if-icon-product-bag IDS_ICONS_Icon_Product_Bag .if.icon.product.bag
$if-icon-product-bike IDS_ICONS_Icon_Product_Bike .if.icon.product.bike
$if-icon-product-boat IDS_ICONS_Icon_Product_Boat .if.icon.product.boat
$if-icon-product-bodyshop IDS_ICONS_Icon_Product_Bodyshop .if.icon.product.bodyshop
$if-icon-product-building IDS_ICONS_Icon_Product_Building .if.icon.product.building
$if-icon-product-bulldozer IDS_ICONS_Icon_Product_Bulldozer .if.icon.product.bulldozer
$if-icon-product-bus IDS_ICONS_Icon_Product_Bus .if.icon.product.bus
$if-icon-product-camera-flash IDS_ICONS_Icon_Product_Camera_flash .if.icon.product.camera-flash
$if-icon-product-camper IDS_ICONS_Icon_Product_Camper .if.icon.product.camper
$if-icon-product-car IDS_ICONS_Icon_Product_Car .if.icon.product.car
$if-icon-product-caravan IDS_ICONS_Icon_Product_Caravan .if.icon.product.caravan
$if-icon-product-cat IDS_ICONS_Icon_Product_Cat .if.icon.product.cat
$if-icon-product-cement-truck IDS_ICONS_Icon_Product_Cement_truck .if.icon.product.cement-truck
$if-icon-product-change-of-ownership IDS_ICONS_Icon_Product_Change_of_ownership .if.icon.product.change-of-ownership
$if-icon-product-child-2-25yo IDS_ICONS_Icon_Product_Child_2_25yo .if.icon.product.child-2-25yo
$if-icon-product-child IDS_ICONS_Icon_Product_Child .if.icon.product.child
$if-icon-product-cloud-light IDS_ICONS_Icon_Product_Cloud_light .if.icon.product.cloud-light
$if-icon-product-collection-truck IDS_ICONS_Icon_Product_Collection_truck .if.icon.product.collection-truck
$if-icon-product-company-daughter IDS_ICONS_Icon_Product_Company_daughter .if.icon.product.company-daughter
$if-icon-product-company-division IDS_ICONS_Icon_Product_Company_division .if.icon.product.company-division
$if-icon-product-company IDS_ICONS_Icon_Product_Company .if.icon.product.company
$if-icon-product-cottage IDS_ICONS_Icon_Product_Cottage .if.icon.product.cottage
$if-icon-product-critical-illness IDS_ICONS_Icon_Product_Critical_illness .if.icon.product.critical-illness
$if-icon-product-death IDS_ICONS_Icon_Product_Death .if.icon.product.death
$if-icon-product-diamond IDS_ICONS_Icon_Product_Diamond .if.icon.product.diamond
$if-icon-product-dog IDS_ICONS_Icon_Product_Dog .if.icon.product.dog
$if-icon-product-favorite IDS_ICONS_Icon_Product_Favorite .if.icon.product.favorite
$if-icon-product-flooding IDS_ICONS_Icon_Product_Flooding .if.icon.product.flooding
$if-icon-product-forest IDS_ICONS_Icon_Product_Forest .if.icon.product.forest
$if-icon-product-forklift IDS_ICONS_Icon_Product_Forklift .if.icon.product.forklift
$if-icon-product-furnished-property IDS_ICONS_Icon_Product_Furnished_property .if.icon.product.furnished-property
$if-icon-product-glasses IDS_ICONS_Icon_Product_Glasses .if.icon.product.glasses
$if-icon-product-globe IDS_ICONS_Icon_Product_Globe .if.icon.product.globe
$if-icon-product-handout IDS_ICONS_Icon_Product_Handout .if.icon.product.handout
$if-icon-product-health IDS_ICONS_Icon_Product_Health .if.icon.product.health
$if-icon-product-home IDS_ICONS_Icon_Product_Home .if.icon.product.home
$if-icon-product-horse IDS_ICONS_Icon_Product_Horse .if.icon.product.horse
$if-icon-product-if-start IDS_ICONS_Icon_Product_If_start .if.icon.product.if-start
$if-icon-product-it-security IDS_ICONS_Icon_Product_It_security .if.icon.product.it-security
$if-icon-product-laptop IDS_ICONS_Icon_Product_Laptop .if.icon.product.laptop
$if-icon-product-large-truck IDS_ICONS_Icon_Product_Large_truck .if.icon.product.large-truck
$if-icon-product-legal IDS_ICONS_Icon_Product_Legal .if.icon.product.legal
$if-icon-product-liability IDS_ICONS_Icon_Product_Liability .if.icon.product.liability
$if-icon-product-life IDS_ICONS_Icon_Product_Life .if.icon.product.life
$if-icon-product-location IDS_ICONS_Icon_Product_Location .if.icon.product.location
$if-icon-product-marine-cargo IDS_ICONS_Icon_Product_Marine_cargo .if.icon.product.marine-cargo
$if-icon-product-mc IDS_ICONS_Icon_Product_Mc .if.icon.product.mc
$if-icon-product-minicar IDS_ICONS_Icon_Product_Minicar .if.icon.product.minicar
$if-icon-product-moped-car IDS_ICONS_Icon_Product_Moped_car .if.icon.product.moped-car
$if-icon-product-moped-eu IDS_ICONS_Icon_Product_Moped_eu .if.icon.product.moped-eu
$if-icon-product-moped IDS_ICONS_Icon_Product_Moped .if.icon.product.moped
$if-icon-product-one-way-ticket IDS_ICONS_Icon_Product_One_way_ticket .if.icon.product.one-way-ticket
$if-icon-product-out-of-work-sickness IDS_ICONS_Icon_Product_Out_of_work_sickness .if.icon.product.out-of-work-sickness
$if-icon-product-patch IDS_ICONS_Icon_Product_Patch .if.icon.product.patch
$if-icon-product-paw IDS_ICONS_Icon_Product_Paw .if.icon.product.paw
$if-icon-product-plane IDS_ICONS_Icon_Product_Plane .if.icon.product.plane
$if-icon-product-pregnancy IDS_ICONS_Icon_Product_Pregnancy .if.icon.product.pregnancy
$if-icon-product-scooter IDS_ICONS_Icon_Product_Scooter .if.icon.product.scooter
$if-icon-product-semi-detached-house IDS_ICONS_Icon_Product_Semi_detached_house .if.icon.product.semi-detached-house
$if-icon-product-ship IDS_ICONS_Icon_Product_Ship .if.icon.product.ship
$if-icon-product-sickness IDS_ICONS_Icon_Product_Sickness .if.icon.product.sickness
$if-icon-product-small-boat IDS_ICONS_Icon_Product_Small_boat .if.icon.product.small-boat
$if-icon-product-smartphone IDS_ICONS_Icon_Product_Smartphone .if.icon.product.smartphone
$if-icon-product-snowmobile IDS_ICONS_Icon_Product_Snowmobile .if.icon.product.snowmobile
$if-icon-product-sport IDS_ICONS_Icon_Product_Sport .if.icon.product.sport
$if-icon-product-stock IDS_ICONS_Icon_Product_Stock .if.icon.product.stock
$if-icon-product-strike IDS_ICONS_Icon_Product_Strike .if.icon.product.strike
$if-icon-product-student IDS_ICONS_Icon_Product_Student .if.icon.product.student
$if-icon-product-tablet IDS_ICONS_Icon_Product_Tablet .if.icon.product.tablet
$if-icon-product-terraced-house IDS_ICONS_Icon_Product_Terraced_house .if.icon.product.terraced-house
$if-icon-product-theft-burglary IDS_ICONS_Icon_Product_Theft_burglary .if.icon.product.theft-burglary
$if-icon-product-time-share-abroad IDS_ICONS_Icon_Product_Time_share_abroad .if.icon.product.time-share-abroad
$if-icon-product-tractor IDS_ICONS_Icon_Product_Tractor .if.icon.product.tractor
$if-icon-product-traffic IDS_ICONS_Icon_Product_Traffic .if.icon.product.traffic
$if-icon-product-trailer IDS_ICONS_Icon_Product_Trailer .if.icon.product.trailer
$if-icon-product-truck IDS_ICONS_Icon_Product_Truck .if.icon.product.truck
$if-icon-product-used-car IDS_ICONS_Icon_Product_Used_car .if.icon.product.used-car
$if-icon-product-van IDS_ICONS_Icon_Product_Van .if.icon.product.van
$if-icon-product-vehicles IDS_ICONS_Icon_Product_Vehicles .if.icon.product.vehicles
$if-icon-product-watch IDS_ICONS_Icon_Product_Watch .if.icon.product.watch
$if-icon-product-water-damage IDS_ICONS_Icon_Product_Water_damage .if.icon.product.water-damage

Some icons

Token Mixin Class Example
$if-icon-some-facebook IDS_ICONS_Icon_Some_Facebook .if.icon.some.facebook
$if-icon-some-instagram IDS_ICONS_Icon_Some_Instagram .if.icon.some.instagram
$if-icon-some-linkedin IDS_ICONS_Icon_Some_Linkedin .if.icon.some.linkedin
$if-icon-some-twitter IDS_ICONS_Icon_Some_Twitter .if.icon.some.twitter
$if-icon-some-youtube IDS_ICONS_Icon_Some_Youtube .if.icon.some.youtube

Symbol icons

Token Mixin Class Example
$if-icon-symbol-add-notification IDS_ICONS_Icon_Symbol_Add_notification .if.icon.symbol.add-notification
$if-icon-symbol-alarm IDS_ICONS_Icon_Symbol_Alarm .if.icon.symbol.alarm
$if-icon-symbol-asterix IDS_ICONS_Icon_Symbol_Asterix .if.icon.symbol.asterix
$if-icon-symbol-bedroom IDS_ICONS_Icon_Symbol_Bedroom .if.icon.symbol.bedroom
$if-icon-symbol-bill IDS_ICONS_Icon_Symbol_Bill .if.icon.symbol.bill
$if-icon-symbol-bookmark IDS_ICONS_Icon_Symbol_Bookmark .if.icon.symbol.bookmark
$if-icon-symbol-bug IDS_ICONS_Icon_Symbol_Bug .if.icon.symbol.bug
$if-icon-symbol-bulb-on IDS_ICONS_Icon_Symbol_Bulb_on .if.icon.symbol.bulb-on
$if-icon-symbol-cargo IDS_ICONS_Icon_Symbol_Cargo .if.icon.symbol.cargo
$if-icon-symbol-cart-return IDS_ICONS_Icon_Symbol_Cart_return .if.icon.symbol.cart-return
$if-icon-symbol-cc IDS_ICONS_Icon_Symbol_Cc .if.icon.symbol.cc
$if-icon-symbol-chart-bar IDS_ICONS_Icon_Symbol_Chart_bar .if.icon.symbol.chart-bar
$if-icon-symbol-chatbot IDS_ICONS_Icon_Symbol_Chatbot .if.icon.symbol.chatbot
$if-icon-symbol-coins IDS_ICONS_Icon_Symbol_Coins .if.icon.symbol.coins
$if-icon-symbol-compass IDS_ICONS_Icon_Symbol_Compass .if.icon.symbol.compass
$if-icon-symbol-curve-directions IDS_ICONS_Icon_Symbol_Curve_directions .if.icon.symbol.curve-directions
$if-icon-symbol-deductible IDS_ICONS_Icon_Symbol_Deductible .if.icon.symbol.deductible
$if-icon-symbol-dishwasher IDS_ICONS_Icon_Symbol_Dishwasher .if.icon.symbol.dishwasher
$if-icon-symbol-doctor IDS_ICONS_Icon_Symbol_Doctor .if.icon.symbol.doctor
$if-icon-symbol-document IDS_ICONS_Icon_Symbol_Document .if.icon.symbol.document
$if-icon-symbol-drop IDS_ICONS_Icon_Symbol_Drop .if.icon.symbol.drop
$if-icon-symbol-energy IDS_ICONS_Icon_Symbol_Energy .if.icon.symbol.energy
$if-icon-symbol-factory IDS_ICONS_Icon_Symbol_Factory .if.icon.symbol.factory
$if-icon-symbol-flag IDS_ICONS_Icon_Symbol_Flag .if.icon.symbol.flag
$if-icon-symbol-globe IDS_ICONS_Icon_Symbol_Globe .if.icon.symbol.globe
$if-icon-symbol-headphones-mic IDS_ICONS_Icon_Symbol_Headphones_mic .if.icon.symbol.headphones-mic
$if-icon-symbol-heart-person IDS_ICONS_Icon_Symbol_Heart_person .if.icon.symbol.heart-person
$if-icon-symbol-image IDS_ICONS_Icon_Symbol_Image .if.icon.symbol.image
$if-icon-symbol-interest IDS_ICONS_Icon_Symbol_Interest .if.icon.symbol.interest
$if-icon-symbol-knight IDS_ICONS_Icon_Symbol_Knight .if.icon.symbol.knight
$if-icon-symbol-loop IDS_ICONS_Icon_Symbol_Loop .if.icon.symbol.loop
$if-icon-symbol-love IDS_ICONS_Icon_Symbol_Love .if.icon.symbol.love
$if-icon-symbol-man-symbol IDS_ICONS_Icon_Symbol_Man_symbol .if.icon.symbol.man-symbol
$if-icon-symbol-man IDS_ICONS_Icon_Symbol_Man .if.icon.symbol.man
$if-icon-symbol-mobile-chat IDS_ICONS_Icon_Symbol_Mobile_chat .if.icon.symbol.mobile-chat
$if-icon-symbol-parent IDS_ICONS_Icon_Symbol_Parent .if.icon.symbol.parent
$if-icon-symbol-people IDS_ICONS_Icon_Symbol_People .if.icon.symbol.people
$if-icon-symbol-percent-badge IDS_ICONS_Icon_Symbol_Percent_badge .if.icon.symbol.percent-badge
$if-icon-symbol-receipt IDS_ICONS_Icon_Symbol_Receipt .if.icon.symbol.receipt
$if-icon-symbol-report-claim IDS_ICONS_Icon_Symbol_Report_claim .if.icon.symbol.report-claim
$if-icon-symbol-responsive IDS_ICONS_Icon_Symbol_Responsive .if.icon.symbol.responsive
$if-icon-symbol-return-policy IDS_ICONS_Icon_Symbol_Return_policy .if.icon.symbol.return-policy
$if-icon-symbol-security IDS_ICONS_Icon_Symbol_Security .if.icon.symbol.security
$if-icon-symbol-single-body IDS_ICONS_Icon_Symbol_Single_body .if.icon.symbol.single-body
$if-icon-symbol-single-copy IDS_ICONS_Icon_Symbol_Single_copy .if.icon.symbol.single-copy
$if-icon-symbol-spa IDS_ICONS_Icon_Symbol_Spa .if.icon.symbol.spa
$if-icon-symbol-star-filled IDS_ICONS_Icon_Symbol_Star_filled .if.icon.symbol.star-filled
$if-icon-symbol-star IDS_ICONS_Icon_Symbol_Star .if.icon.symbol.star
$if-icon-symbol-trophy IDS_ICONS_Icon_Symbol_Trophy .if.icon.symbol.trophy
$if-icon-symbol-woman-symbol IDS_ICONS_Icon_Symbol_Woman_symbol .if.icon.symbol.woman-symbol
$if-icon-symbol-woman IDS_ICONS_Icon_Symbol_Woman .if.icon.symbol.woman
$if-icon-symbol-worker IDS_ICONS_Icon_Symbol_Worker .if.icon.symbol.worker
$if-icon-symbol-wrench-tool IDS_ICONS_Icon_Symbol_Wrench_tool .if.icon.symbol.wrench-tool

Ui icons

Token Mixin Class Example
$if-icon-ui-add-user IDS_ICONS_Icon_Ui_Add_user .if.icon.ui.add-user
$if-icon-ui-arrow-back-top-left IDS_ICONS_Icon_Ui_Arrow_back_top_left .if.icon.ui.arrow-back-top-left
$if-icon-ui-arrow-down IDS_ICONS_Icon_Ui_Arrow_down .if.icon.ui.arrow-down
$if-icon-ui-arrow-left IDS_ICONS_Icon_Ui_Arrow_left .if.icon.ui.arrow-left
$if-icon-ui-arrow-right IDS_ICONS_Icon_Ui_Arrow_right .if.icon.ui.arrow-right
$if-icon-ui-arrow-up IDS_ICONS_Icon_Ui_Arrow_up .if.icon.ui.arrow-up
$if-icon-ui-attach IDS_ICONS_Icon_Ui_Attach .if.icon.ui.attach
$if-icon-ui-back-arrow IDS_ICONS_Icon_Ui_Back_arrow .if.icon.ui.back-arrow
$if-icon-ui-bank-card IDS_ICONS_Icon_Ui_Bank_card .if.icon.ui.bank-card
$if-icon-ui-books IDS_ICONS_Icon_Ui_Books .if.icon.ui.books
$if-icon-ui-calculator IDS_ICONS_Icon_Ui_Calculator .if.icon.ui.calculator
$if-icon-ui-camera IDS_ICONS_Icon_Ui_Camera .if.icon.ui.camera
$if-icon-ui-chat IDS_ICONS_Icon_Ui_Chat .if.icon.ui.chat
$if-icon-ui-check-circle IDS_ICONS_Icon_Ui_Check_circle .if.icon.ui.check-circle
$if-icon-ui-check IDS_ICONS_Icon_Ui_Check .if.icon.ui.check
$if-icon-ui-checkmark IDS_ICONS_Icon_Ui_Checkmark .if.icon.ui.checkmark
$if-icon-ui-cheque IDS_ICONS_Icon_Ui_Cheque .if.icon.ui.cheque
$if-icon-ui-chevron-down IDS_ICONS_Icon_Ui_Chevron_down .if.icon.ui.chevron-down
$if-icon-ui-chevron-left IDS_ICONS_Icon_Ui_Chevron_left .if.icon.ui.chevron-left
$if-icon-ui-chevron-right IDS_ICONS_Icon_Ui_Chevron_right .if.icon.ui.chevron-right
$if-icon-ui-chevron-up IDS_ICONS_Icon_Ui_Chevron_up .if.icon.ui.chevron-up
$if-icon-ui-chevrons-left IDS_ICONS_Icon_Ui_Chevrons_left .if.icon.ui.chevrons-left
$if-icon-ui-chevrons-right IDS_ICONS_Icon_Ui_Chevrons_right .if.icon.ui.chevrons-right
$if-icon-ui-clock IDS_ICONS_Icon_Ui_Clock .if.icon.ui.clock
$if-icon-ui-close IDS_ICONS_Icon_Ui_Close .if.icon.ui.close
$if-icon-ui-cockade IDS_ICONS_Icon_Ui_Cockade .if.icon.ui.cockade
$if-icon-ui-cog IDS_ICONS_Icon_Ui_Cog .if.icon.ui.cog
$if-icon-ui-computer-upload IDS_ICONS_Icon_Ui_Computer_upload .if.icon.ui.computer-upload
$if-icon-ui-corner-left-round IDS_ICONS_Icon_Ui_Corner_left_round .if.icon.ui.corner-left-round
$if-icon-ui-data-download IDS_ICONS_Icon_Ui_Data_download .if.icon.ui.data-download
$if-icon-ui-data-upload IDS_ICONS_Icon_Ui_Data_upload .if.icon.ui.data-upload
$if-icon-ui-date IDS_ICONS_Icon_Ui_Date .if.icon.ui.date
$if-icon-ui-direct-edit IDS_ICONS_Icon_Ui_Direct_edit .if.icon.ui.direct-edit
$if-icon-ui-dislike IDS_ICONS_Icon_Ui_Dislike .if.icon.ui.dislike
$if-icon-ui-document-docx IDS_ICONS_Icon_Ui_Document_docx .if.icon.ui.document-docx
$if-icon-ui-document-pdf IDS_ICONS_Icon_Ui_Document_pdf .if.icon.ui.document-pdf
$if-icon-ui-document-pptx IDS_ICONS_Icon_Ui_Document_pptx .if.icon.ui.document-pptx
$if-icon-ui-document-xlsx IDS_ICONS_Icon_Ui_Document_xlsx .if.icon.ui.document-xlsx
$if-icon-ui-drop-down IDS_ICONS_Icon_Ui_Drop_down .if.icon.ui.drop-down
$if-icon-ui-drop-left IDS_ICONS_Icon_Ui_Drop_left .if.icon.ui.drop-left
$if-icon-ui-drop-right IDS_ICONS_Icon_Ui_Drop_right .if.icon.ui.drop-right
$if-icon-ui-drop-up IDS_ICONS_Icon_Ui_Drop_up .if.icon.ui.drop-up
$if-icon-ui-edit IDS_ICONS_Icon_Ui_Edit .if.icon.ui.edit
$if-icon-ui-external-link IDS_ICONS_Icon_Ui_External_link .if.icon.ui.external-link
$if-icon-ui-file-download IDS_ICONS_Icon_Ui_File_download .if.icon.ui.file-download
$if-icon-ui-film IDS_ICONS_Icon_Ui_Film .if.icon.ui.film
$if-icon-ui-filter IDS_ICONS_Icon_Ui_Filter .if.icon.ui.filter
$if-icon-ui-fingerprint IDS_ICONS_Icon_Ui_Fingerprint .if.icon.ui.fingerprint
$if-icon-ui-floppy-disk IDS_ICONS_Icon_Ui_Floppy_disk .if.icon.ui.floppy-disk
$if-icon-ui-fullscreen IDS_ICONS_Icon_Ui_Fullscreen .if.icon.ui.fullscreen
$if-icon-ui-handshake IDS_ICONS_Icon_Ui_Handshake .if.icon.ui.handshake
$if-icon-ui-help IDS_ICONS_Icon_Ui_Help .if.icon.ui.help
$if-icon-ui-hourglass IDS_ICONS_Icon_Ui_Hourglass .if.icon.ui.hourglass
$if-icon-ui-house IDS_ICONS_Icon_Ui_House .if.icon.ui.house
$if-icon-ui-img IDS_ICONS_Icon_Ui_Img .if.icon.ui.img
$if-icon-ui-incomming-call IDS_ICONS_Icon_Ui_Incomming_call .if.icon.ui.incomming-call
$if-icon-ui-info IDS_ICONS_Icon_Ui_Info .if.icon.ui.info
$if-icon-ui-invert IDS_ICONS_Icon_Ui_Invert .if.icon.ui.invert
$if-icon-ui-leave IDS_ICONS_Icon_Ui_Leave .if.icon.ui.leave
$if-icon-ui-like IDS_ICONS_Icon_Ui_Like .if.icon.ui.like
$if-icon-ui-link IDS_ICONS_Icon_Ui_Link .if.icon.ui.link
$if-icon-ui-list IDS_ICONS_Icon_Ui_List .if.icon.ui.list
$if-icon-ui-lock-open IDS_ICONS_Icon_Ui_Lock_open .if.icon.ui.lock-open
$if-icon-ui-lock IDS_ICONS_Icon_Ui_Lock .if.icon.ui.lock
$if-icon-ui-log-in IDS_ICONS_Icon_Ui_Log_in .if.icon.ui.log-in
$if-icon-ui-log-out IDS_ICONS_Icon_Ui_Log_out .if.icon.ui.log-out
$if-icon-ui-mail IDS_ICONS_Icon_Ui_Mail .if.icon.ui.mail
$if-icon-ui-map-pin IDS_ICONS_Icon_Ui_Map_pin .if.icon.ui.map-pin
$if-icon-ui-marker IDS_ICONS_Icon_Ui_Marker .if.icon.ui.marker
$if-icon-ui-math IDS_ICONS_Icon_Ui_Math .if.icon.ui.math
$if-icon-ui-megaphone IDS_ICONS_Icon_Ui_Megaphone .if.icon.ui.megaphone
$if-icon-ui-menu IDS_ICONS_Icon_Ui_Menu .if.icon.ui.menu
$if-icon-ui-microphone-off IDS_ICONS_Icon_Ui_Microphone_off .if.icon.ui.microphone-off
$if-icon-ui-microphone IDS_ICONS_Icon_Ui_Microphone .if.icon.ui.microphone
$if-icon-ui-microsoft IDS_ICONS_Icon_Ui_Microsoft .if.icon.ui.microsoft
$if-icon-ui-minus IDS_ICONS_Icon_Ui_Minus .if.icon.ui.minus
$if-icon-ui-more-horizontal-filled IDS_ICONS_Icon_Ui_More_horizontal_filled .if.icon.ui.more-horizontal-filled
$if-icon-ui-more-horizontal IDS_ICONS_Icon_Ui_More_horizontal .if.icon.ui.more-horizontal
$if-icon-ui-more-vertical IDS_ICONS_Icon_Ui_More_vertical .if.icon.ui.more-vertical
$if-icon-ui-multiple IDS_ICONS_Icon_Ui_Multiple .if.icon.ui.multiple
$if-icon-ui-open-in-new IDS_ICONS_Icon_Ui_Open_in_new .if.icon.ui.open-in-new
$if-icon-ui-outgoing-call IDS_ICONS_Icon_Ui_Outgoing_call .if.icon.ui.outgoing-call
$if-icon-ui-pause-filled IDS_ICONS_Icon_Ui_Pause_filled .if.icon.ui.pause-filled
$if-icon-ui-pause IDS_ICONS_Icon_Ui_Pause .if.icon.ui.pause
$if-icon-ui-pencil IDS_ICONS_Icon_Ui_Pencil .if.icon.ui.pencil
$if-icon-ui-person IDS_ICONS_Icon_Ui_Person .if.icon.ui.person
$if-icon-ui-phone-call-end IDS_ICONS_Icon_Ui_Phone_call_end .if.icon.ui.phone-call-end
$if-icon-ui-phone IDS_ICONS_Icon_Ui_Phone .if.icon.ui.phone
$if-icon-ui-pin IDS_ICONS_Icon_Ui_Pin .if.icon.ui.pin
$if-icon-ui-play-filled IDS_ICONS_Icon_Ui_Play_filled .if.icon.ui.play-filled
$if-icon-ui-play IDS_ICONS_Icon_Ui_Play .if.icon.ui.play
$if-icon-ui-plus IDS_ICONS_Icon_Ui_Plus .if.icon.ui.plus
$if-icon-ui-preview-off IDS_ICONS_Icon_Ui_Preview_off .if.icon.ui.preview-off
$if-icon-ui-preview IDS_ICONS_Icon_Ui_Preview .if.icon.ui.preview
$if-icon-ui-printer IDS_ICONS_Icon_Ui_Printer .if.icon.ui.printer
$if-icon-ui-real-estate IDS_ICONS_Icon_Ui_Real_estate .if.icon.ui.real-estate
$if-icon-ui-recipe IDS_ICONS_Icon_Ui_Recipe .if.icon.ui.recipe
$if-icon-ui-redo IDS_ICONS_Icon_Ui_Redo .if.icon.ui.redo
$if-icon-ui-refresh IDS_ICONS_Icon_Ui_Refresh .if.icon.ui.refresh
$if-icon-ui-replace IDS_ICONS_Icon_Ui_Replace .if.icon.ui.replace
$if-icon-ui-resend IDS_ICONS_Icon_Ui_Resend .if.icon.ui.resend
$if-icon-ui-return IDS_ICONS_Icon_Ui_Return .if.icon.ui.return
$if-icon-ui-search IDS_ICONS_Icon_Ui_Search .if.icon.ui.search
$if-icon-ui-secure-message IDS_ICONS_Icon_Ui_Secure_message .if.icon.ui.secure-message
$if-icon-ui-send-message IDS_ICONS_Icon_Ui_Send_message .if.icon.ui.send-message
$if-icon-ui-setup-preferences IDS_ICONS_Icon_Ui_Setup_preferences .if.icon.ui.setup-preferences
$if-icon-ui-share IDS_ICONS_Icon_Ui_Share .if.icon.ui.share
$if-icon-ui-shop IDS_ICONS_Icon_Ui_Shop .if.icon.ui.shop
$if-icon-ui-shopping-bag IDS_ICONS_Icon_Ui_Shopping_bag .if.icon.ui.shopping-bag
$if-icon-ui-shopping-cart IDS_ICONS_Icon_Ui_Shopping_cart .if.icon.ui.shopping-cart
$if-icon-ui-signature IDS_ICONS_Icon_Ui_Signature .if.icon.ui.signature
$if-icon-ui-single-folded IDS_ICONS_Icon_Ui_Single_folded .if.icon.ui.single-folded
$if-icon-ui-sound IDS_ICONS_Icon_Ui_Sound .if.icon.ui.sound
$if-icon-ui-speech-bubble IDS_ICONS_Icon_Ui_Speech_bubble .if.icon.ui.speech-bubble
$if-icon-ui-stack IDS_ICONS_Icon_Ui_Stack .if.icon.ui.stack
$if-icon-ui-subtitles IDS_ICONS_Icon_Ui_Subtitles .if.icon.ui.subtitles
$if-icon-ui-tasks IDS_ICONS_Icon_Ui_Tasks .if.icon.ui.tasks
$if-icon-ui-trashcan IDS_ICONS_Icon_Ui_Trashcan .if.icon.ui.trashcan
$if-icon-ui-video-off IDS_ICONS_Icon_Ui_Video_off .if.icon.ui.video-off
$if-icon-ui-volume-mute IDS_ICONS_Icon_Ui_Volume_mute .if.icon.ui.volume-mute
$if-icon-ui-volume IDS_ICONS_Icon_Ui_Volume .if.icon.ui.volume
$if-icon-ui-warning-light IDS_ICONS_Icon_Ui_Warning_light .if.icon.ui.warning-light
$if-icon-ui-warning IDS_ICONS_Icon_Ui_Warning .if.icon.ui.warning

Flags

Africa icons

Token Mixin Class Example
$if-icon-flag-africa-ao IDS_ICONS_Icon_Flag-africa_Ao .if.icon.flag-africa.ao
$if-icon-flag-africa-bf IDS_ICONS_Icon_Flag-africa_Bf .if.icon.flag-africa.bf
$if-icon-flag-africa-bi IDS_ICONS_Icon_Flag-africa_Bi .if.icon.flag-africa.bi
$if-icon-flag-africa-bj IDS_ICONS_Icon_Flag-africa_Bj .if.icon.flag-africa.bj
$if-icon-flag-africa-bw IDS_ICONS_Icon_Flag-africa_Bw .if.icon.flag-africa.bw
$if-icon-flag-africa-cd IDS_ICONS_Icon_Flag-africa_Cd .if.icon.flag-africa.cd
$if-icon-flag-africa-cf IDS_ICONS_Icon_Flag-africa_Cf .if.icon.flag-africa.cf
$if-icon-flag-africa-cg IDS_ICONS_Icon_Flag-africa_Cg .if.icon.flag-africa.cg
$if-icon-flag-africa-cm IDS_ICONS_Icon_Flag-africa_Cm .if.icon.flag-africa.cm
$if-icon-flag-africa-cv IDS_ICONS_Icon_Flag-africa_Cv .if.icon.flag-africa.cv
$if-icon-flag-africa-dj IDS_ICONS_Icon_Flag-africa_Dj .if.icon.flag-africa.dj
$if-icon-flag-africa-dz IDS_ICONS_Icon_Flag-africa_Dz .if.icon.flag-africa.dz
$if-icon-flag-africa-eg IDS_ICONS_Icon_Flag-africa_Eg .if.icon.flag-africa.eg
$if-icon-flag-africa-eh IDS_ICONS_Icon_Flag-africa_Eh .if.icon.flag-africa.eh
$if-icon-flag-africa-er IDS_ICONS_Icon_Flag-africa_Er .if.icon.flag-africa.er
$if-icon-flag-africa-et IDS_ICONS_Icon_Flag-africa_Et .if.icon.flag-africa.et
$if-icon-flag-africa-ga IDS_ICONS_Icon_Flag-africa_Ga .if.icon.flag-africa.ga
$if-icon-flag-africa-gh IDS_ICONS_Icon_Flag-africa_Gh .if.icon.flag-africa.gh
$if-icon-flag-africa-gm IDS_ICONS_Icon_Flag-africa_Gm .if.icon.flag-africa.gm
$if-icon-flag-africa-gn IDS_ICONS_Icon_Flag-africa_Gn .if.icon.flag-africa.gn
$if-icon-flag-africa-gq IDS_ICONS_Icon_Flag-africa_Gq .if.icon.flag-africa.gq
$if-icon-flag-africa-gw IDS_ICONS_Icon_Flag-africa_Gw .if.icon.flag-africa.gw
$if-icon-flag-africa-ke IDS_ICONS_Icon_Flag-africa_Ke .if.icon.flag-africa.ke
$if-icon-flag-africa-km IDS_ICONS_Icon_Flag-africa_Km .if.icon.flag-africa.km
$if-icon-flag-africa-lr IDS_ICONS_Icon_Flag-africa_Lr .if.icon.flag-africa.lr
$if-icon-flag-africa-ls IDS_ICONS_Icon_Flag-africa_Ls .if.icon.flag-africa.ls
$if-icon-flag-africa-ly IDS_ICONS_Icon_Flag-africa_Ly .if.icon.flag-africa.ly
$if-icon-flag-africa-mg IDS_ICONS_Icon_Flag-africa_Mg .if.icon.flag-africa.mg
$if-icon-flag-africa-ml IDS_ICONS_Icon_Flag-africa_Ml .if.icon.flag-africa.ml
$if-icon-flag-africa-mr IDS_ICONS_Icon_Flag-africa_Mr .if.icon.flag-africa.mr
$if-icon-flag-africa-mu IDS_ICONS_Icon_Flag-africa_Mu .if.icon.flag-africa.mu
$if-icon-flag-africa-mw IDS_ICONS_Icon_Flag-africa_Mw .if.icon.flag-africa.mw
$if-icon-flag-africa-mz IDS_ICONS_Icon_Flag-africa_Mz .if.icon.flag-africa.mz
$if-icon-flag-africa-na IDS_ICONS_Icon_Flag-africa_Na .if.icon.flag-africa.na
$if-icon-flag-africa-ne IDS_ICONS_Icon_Flag-africa_Ne .if.icon.flag-africa.ne
$if-icon-flag-africa-ng IDS_ICONS_Icon_Flag-africa_Ng .if.icon.flag-africa.ng
$if-icon-flag-africa-om IDS_ICONS_Icon_Flag-africa_Om .if.icon.flag-africa.om
$if-icon-flag-africa-rw IDS_ICONS_Icon_Flag-africa_Rw .if.icon.flag-africa.rw
$if-icon-flag-africa-sa IDS_ICONS_Icon_Flag-africa_Sa .if.icon.flag-africa.sa
$if-icon-flag-africa-sc IDS_ICONS_Icon_Flag-africa_Sc .if.icon.flag-africa.sc
$if-icon-flag-africa-sd IDS_ICONS_Icon_Flag-africa_Sd .if.icon.flag-africa.sd
$if-icon-flag-africa-sh IDS_ICONS_Icon_Flag-africa_Sh .if.icon.flag-africa.sh
$if-icon-flag-africa-sl IDS_ICONS_Icon_Flag-africa_Sl .if.icon.flag-africa.sl
$if-icon-flag-africa-sn IDS_ICONS_Icon_Flag-africa_Sn .if.icon.flag-africa.sn
$if-icon-flag-africa-so IDS_ICONS_Icon_Flag-africa_So .if.icon.flag-africa.so
$if-icon-flag-africa-ss IDS_ICONS_Icon_Flag-africa_Ss .if.icon.flag-africa.ss
$if-icon-flag-africa-st IDS_ICONS_Icon_Flag-africa_St .if.icon.flag-africa.st
$if-icon-flag-africa-sz IDS_ICONS_Icon_Flag-africa_Sz .if.icon.flag-africa.sz
$if-icon-flag-africa-td IDS_ICONS_Icon_Flag-africa_Td .if.icon.flag-africa.td
$if-icon-flag-africa-tg IDS_ICONS_Icon_Flag-africa_Tg .if.icon.flag-africa.tg
$if-icon-flag-africa-tn IDS_ICONS_Icon_Flag-africa_Tn .if.icon.flag-africa.tn
$if-icon-flag-africa-tz IDS_ICONS_Icon_Flag-africa_Tz .if.icon.flag-africa.tz
$if-icon-flag-africa-ug IDS_ICONS_Icon_Flag-africa_Ug .if.icon.flag-africa.ug
$if-icon-flag-africa-ye IDS_ICONS_Icon_Flag-africa_Ye .if.icon.flag-africa.ye
$if-icon-flag-africa-yt IDS_ICONS_Icon_Flag-africa_Yt .if.icon.flag-africa.yt
$if-icon-flag-africa-za IDS_ICONS_Icon_Flag-africa_Za .if.icon.flag-africa.za
$if-icon-flag-africa-zm IDS_ICONS_Icon_Flag-africa_Zm .if.icon.flag-africa.zm
$if-icon-flag-africa-zw IDS_ICONS_Icon_Flag-africa_Zw .if.icon.flag-africa.zw

Americas icons

Token Mixin Class Example
$if-icon-flag-americas-ag IDS_ICONS_Icon_Flag-americas_Ag .if.icon.flag-americas.ag
$if-icon-flag-americas-ai IDS_ICONS_Icon_Flag-americas_Ai .if.icon.flag-americas.ai
$if-icon-flag-americas-ar IDS_ICONS_Icon_Flag-americas_Ar .if.icon.flag-americas.ar
$if-icon-flag-americas-aw IDS_ICONS_Icon_Flag-americas_Aw .if.icon.flag-americas.aw
$if-icon-flag-americas-bb IDS_ICONS_Icon_Flag-americas_Bb .if.icon.flag-americas.bb
$if-icon-flag-americas-bm IDS_ICONS_Icon_Flag-americas_Bm .if.icon.flag-americas.bm
$if-icon-flag-americas-bo IDS_ICONS_Icon_Flag-americas_Bo .if.icon.flag-americas.bo