CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, 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.0

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
$if-icon-flag-americas-br IDS_ICONS_Icon_Flag-americas_Br .if.icon.flag-americas.br
$if-icon-flag-americas-bs IDS_ICONS_Icon_Flag-americas_Bs .if.icon.flag-americas.bs
$if-icon-flag-americas-bz IDS_ICONS_Icon_Flag-americas_Bz .if.icon.flag-americas.bz
$if-icon-flag-americas-ca IDS_ICONS_Icon_Flag-americas_Ca .if.icon.flag-americas.ca
$if-icon-flag-americas-cl IDS_ICONS_Icon_Flag-americas_Cl .if.icon.flag-americas.cl
$if-icon-flag-americas-co IDS_ICONS_Icon_Flag-americas_Co .if.icon.flag-americas.co
$if-icon-flag-americas-cr IDS_ICONS_Icon_Flag-americas_Cr .if.icon.flag-americas.cr
$if-icon-flag-americas-cu IDS_ICONS_Icon_Flag-americas_Cu .if.icon.flag-americas.cu
$if-icon-flag-americas-cw IDS_ICONS_Icon_Flag-americas_Cw .if.icon.flag-americas.cw
$if-icon-flag-americas-dm IDS_ICONS_Icon_Flag-americas_Dm .if.icon.flag-americas.dm
$if-icon-flag-americas-do IDS_ICONS_Icon_Flag-americas_Do .if.icon.flag-americas.do
$if-icon-flag-americas-ec IDS_ICONS_Icon_Flag-americas_Ec .if.icon.flag-americas.ec
$if-icon-flag-americas-fk IDS_ICONS_Icon_Flag-americas_Fk .if.icon.flag-americas.fk
$if-icon-flag-americas-gd IDS_ICONS_Icon_Flag-americas_Gd .if.icon.flag-americas.gd
$if-icon-flag-americas-gs IDS_ICONS_Icon_Flag-americas_Gs .if.icon.flag-americas.gs
LEOTERRRRREOOAAAMPPPITTMG
$if-icon-flag-americas-gt IDS_ICONS_Icon_Flag-americas_Gt .if.icon.flag-americas.gt
$if-icon-flag-americas-gy IDS_ICONS_Icon_Flag-americas_Gy .if.icon.flag-americas.gy
$if-icon-flag-americas-hn IDS_ICONS_Icon_Flag-americas_Hn .if.icon.flag-americas.hn
$if-icon-flag-americas-ht IDS_ICONS_Icon_Flag-americas_Ht .if.icon.flag-americas.ht
$if-icon-flag-americas-jm IDS_ICONS_Icon_Flag-americas_Jm .if.icon.flag-americas.jm
$if-icon-flag-americas-kn IDS_ICONS_Icon_Flag-americas_Kn .if.icon.flag-americas.kn
$if-icon-flag-americas-ky IDS_ICONS_Icon_Flag-americas_Ky .if.icon.flag-americas.ky
$if-icon-flag-americas-lc IDS_ICONS_Icon_Flag-americas_Lc .if.icon.flag-americas.lc
$if-icon-flag-americas-me IDS_ICONS_Icon_Flag-americas_Me .if.icon.flag-americas.me
$if-icon-flag-americas-ms IDS_ICONS_Icon_Flag-americas_Ms .if.icon.flag-americas.ms
$if-icon-flag-americas-mx IDS_ICONS_Icon_Flag-americas_Mx .if.icon.flag-americas.mx
$if-icon-flag-americas-ni IDS_ICONS_Icon_Flag-americas_Ni .if.icon.flag-americas.ni
$if-icon-flag-americas-pa IDS_ICONS_Icon_Flag-americas_Pa .if.icon.flag-americas.pa
$if-icon-flag-americas-pe IDS_ICONS_Icon_Flag-americas_Pe .if.icon.flag-americas.pe
$if-icon-flag-americas-pm IDS_ICONS_Icon_Flag-americas_Pm .if.icon.flag-americas.pm
$if-icon-flag-americas-pr IDS_ICONS_Icon_Flag-americas_Pr .if.icon.flag-americas.pr
$if-icon-flag-americas-py IDS_ICONS_Icon_Flag-americas_Py .if.icon.flag-americas.py
$if-icon-flag-americas-sr IDS_ICONS_Icon_Flag-americas_Sr .if.icon.flag-americas.sr
$if-icon-flag-americas-sv IDS_ICONS_Icon_Flag-americas_Sv .if.icon.flag-americas.sv
$if-icon-flag-americas-sx IDS_ICONS_Icon_Flag-americas_Sx .if.icon.flag-americas.sx
$if-icon-flag-americas-tc IDS_ICONS_Icon_Flag-americas_Tc .if.icon.flag-americas.tc
$if-icon-flag-americas-tt IDS_ICONS_Icon_Flag-americas_Tt .if.icon.flag-americas.tt
$if-icon-flag-americas-um IDS_ICONS_Icon_Flag-americas_Um .if.icon.flag-americas.um
$if-icon-flag-americas-us IDS_ICONS_Icon_Flag-americas_Us .if.icon.flag-americas.us
$if-icon-flag-americas-uy IDS_ICONS_Icon_Flag-americas_Uy .if.icon.flag-americas.uy
$if-icon-flag-americas-vc IDS_ICONS_Icon_Flag-americas_Vc .if.icon.flag-americas.vc
$if-icon-flag-americas-ve IDS_ICONS_Icon_Flag-americas_Ve .if.icon.flag-americas.ve
$if-icon-flag-americas-vg IDS_ICONS_Icon_Flag-americas_Vg .if.icon.flag-americas.vg
$if-icon-flag-americas-vi IDS_ICONS_Icon_Flag-americas_Vi .if.icon.flag-americas.vi

Antarctica icons

Token Mixin Class Example
$if-icon-flag-antarctica-aq IDS_ICONS_Icon_Flag-antarctica_Aq .if.icon.flag-antarctica.aq
$if-icon-flag-antarctica-hm IDS_ICONS_Icon_Flag-antarctica_Hm .if.icon.flag-antarctica.hm
$if-icon-flag-antarctica-tf IDS_ICONS_Icon_Flag-antarctica_Tf .if.icon.flag-antarctica.tf

Asia icons

Token Mixin Class Example
$if-icon-flag-asia-ae IDS_ICONS_Icon_Flag-asia_Ae .if.icon.flag-asia.ae
$if-icon-flag-asia-af IDS_ICONS_Icon_Flag-asia_Af .if.icon.flag-asia.af
$if-icon-flag-asia-am IDS_ICONS_Icon_Flag-asia_Am .if.icon.flag-asia.am
$if-icon-flag-asia-az IDS_ICONS_Icon_Flag-asia_Az .if.icon.flag-asia.az
$if-icon-flag-asia-bd IDS_ICONS_Icon_Flag-asia_Bd .if.icon.flag-asia.bd
$if-icon-flag-asia-bh IDS_ICONS_Icon_Flag-asia_Bh .if.icon.flag-asia.bh
$if-icon-flag-asia-bn IDS_ICONS_Icon_Flag-asia_Bn .if.icon.flag-asia.bn
$if-icon-flag-asia-bt IDS_ICONS_Icon_Flag-asia_Bt .if.icon.flag-asia.bt
$if-icon-flag-asia-cc IDS_ICONS_Icon_Flag-asia_Cc .if.icon.flag-asia.cc
$if-icon-flag-asia-cn IDS_ICONS_Icon_Flag-asia_Cn .if.icon.flag-asia.cn
$if-icon-flag-asia-cx IDS_ICONS_Icon_Flag-asia_Cx .if.icon.flag-asia.cx
$if-icon-flag-asia-hk IDS_ICONS_Icon_Flag-asia_Hk .if.icon.flag-asia.hk
$if-icon-flag-asia-il IDS_ICONS_Icon_Flag-asia_Il .if.icon.flag-asia.il
$if-icon-flag-asia-in IDS_ICONS_Icon_Flag-asia_In .if.icon.flag-asia.in
$if-icon-flag-asia-io IDS_ICONS_Icon_Flag-asia_Io .if.icon.flag-asia.io
$if-icon-flag-asia-iq IDS_ICONS_Icon_Flag-asia_Iq .if.icon.flag-asia.iq
$if-icon-flag-asia-ir IDS_ICONS_Icon_Flag-asia_Ir .if.icon.flag-asia.ir
$if-icon-flag-asia-jo IDS_ICONS_Icon_Flag-asia_Jo .if.icon.flag-asia.jo
$if-icon-flag-asia-jp IDS_ICONS_Icon_Flag-asia_Jp .if.icon.flag-asia.jp
$if-icon-flag-asia-kg IDS_ICONS_Icon_Flag-asia_Kg .if.icon.flag-asia.kg
$if-icon-flag-asia-kh IDS_ICONS_Icon_Flag-asia_Kh .if.icon.flag-asia.kh
$if-icon-flag-asia-kp IDS_ICONS_Icon_Flag-asia_Kp .if.icon.flag-asia.kp
$if-icon-flag-asia-kr IDS_ICONS_Icon_Flag-asia_Kr .if.icon.flag-asia.kr
$if-icon-flag-asia-kw IDS_ICONS_Icon_Flag-asia_Kw .if.icon.flag-asia.kw
$if-icon-flag-asia-kz IDS_ICONS_Icon_Flag-asia_Kz .if.icon.flag-asia.kz
$if-icon-flag-asia-la IDS_ICONS_Icon_Flag-asia_La .if.icon.flag-asia.la
$if-icon-flag-asia-lb IDS_ICONS_Icon_Flag-asia_Lb .if.icon.flag-asia.lb
$if-icon-flag-asia-lk IDS_ICONS_Icon_Flag-asia_Lk .if.icon.flag-asia.lk
$if-icon-flag-asia-mm IDS_ICONS_Icon_Flag-asia_Mm .if.icon.flag-asia.mm
$if-icon-flag-asia-mn IDS_ICONS_Icon_Flag-asia_Mn .if.icon.flag-asia.mn
$if-icon-flag-asia-mo IDS_ICONS_Icon_Flag-asia_Mo .if.icon.flag-asia.mo
$if-icon-flag-asia-mv IDS_ICONS_Icon_Flag-asia_Mv .if.icon.flag-asia.mv
$if-icon-flag-asia-my IDS_ICONS_Icon_Flag-asia_My .if.icon.flag-asia.my
$if-icon-flag-asia-np IDS_ICONS_Icon_Flag-asia_Np .if.icon.flag-asia.np
$if-icon-flag-asia-ph IDS_ICONS_Icon_Flag-asia_Ph .if.icon.flag-asia.ph
$if-icon-flag-asia-pk IDS_ICONS_Icon_Flag-asia_Pk .if.icon.flag-asia.pk
$if-icon-flag-asia-ps IDS_ICONS_Icon_Flag-asia_Ps .if.icon.flag-asia.ps
$if-icon-flag-asia-qa IDS_ICONS_Icon_Flag-asia_Qa .if.icon.flag-asia.qa
$if-icon-flag-asia-ru IDS_ICONS_Icon_Flag-asia_Ru .if.icon.flag-asia.ru
$if-icon-flag-asia-sg IDS_ICONS_Icon_Flag-asia_Sg .if.icon.flag-asia.sg
$if-icon-flag-asia-sy IDS_ICONS_Icon_Flag-asia_Sy .if.icon.flag-asia.sy
$if-icon-flag-asia-th IDS_ICONS_Icon_Flag-asia_Th .if.icon.flag-asia.th
$if-icon-flag-asia-tj IDS_ICONS_Icon_Flag-asia_Tj .if.icon.flag-asia.tj
$if-icon-flag-asia-tl IDS_ICONS_Icon_Flag-asia_Tl .if.icon.flag-asia.tl
$if-icon-flag-asia-tm IDS_ICONS_Icon_Flag-asia_Tm .if.icon.flag-asia.tm
$if-icon-flag-asia-tr IDS_ICONS_Icon_Flag-asia_Tr .if.icon.flag-asia.tr
$if-icon-flag-asia-tw IDS_ICONS_Icon_Flag-asia_Tw .if.icon.flag-asia.tw
$if-icon-flag-asia-uz IDS_ICONS_Icon_Flag-asia_Uz .if.icon.flag-asia.uz
$if-icon-flag-asia-vn IDS_ICONS_Icon_Flag-asia_Vn .if.icon.flag-asia.vn

Europe icons

Token Mixin Class Example
$if-icon-flag-europe-ad IDS_ICONS_Icon_Flag-europe_Ad .if.icon.flag-europe.ad
$if-icon-flag-europe-al IDS_ICONS_Icon_Flag-europe_Al .if.icon.flag-europe.al
$if-icon-flag-europe-at IDS_ICONS_Icon_Flag-europe_At .if.icon.flag-europe.at
$if-icon-flag-europe-ax IDS_ICONS_Icon_Flag-europe_Ax .if.icon.flag-europe.ax
$if-icon-flag-europe-ba IDS_ICONS_Icon_Flag-europe_Ba .if.icon.flag-europe.ba
$if-icon-flag-europe-be IDS_ICONS_Icon_Flag-europe_Be .if.icon.flag-europe.be
$if-icon-flag-europe-bg IDS_ICONS_Icon_Flag-europe_Bg .if.icon.flag-europe.bg
$if-icon-flag-europe-bl IDS_ICONS_Icon_Flag-europe_Bl .if.icon.flag-europe.bl
$if-icon-flag-europe-bq IDS_ICONS_Icon_Flag-europe_Bq .if.icon.flag-europe.bq
$if-icon-flag-europe-bv IDS_ICONS_Icon_Flag-europe_Bv .if.icon.flag-europe.bv
$if-icon-flag-europe-by IDS_ICONS_Icon_Flag-europe_By .if.icon.flag-europe.by
$if-icon-flag-europe-ch IDS_ICONS_Icon_Flag-europe_Ch .if.icon.flag-europe.ch
$if-icon-flag-europe-ci IDS_ICONS_Icon_Flag-europe_Ci .if.icon.flag-europe.ci
$if-icon-flag-europe-cy IDS_ICONS_Icon_Flag-europe_Cy .if.icon.flag-europe.cy
$if-icon-flag-europe-cz IDS_ICONS_Icon_Flag-europe_Cz .if.icon.flag-europe.cz
$if-icon-flag-europe-de IDS_ICONS_Icon_Flag-europe_De .if.icon.flag-europe.de
$if-icon-flag-europe-dk IDS_ICONS_Icon_Flag-europe_Dk .if.icon.flag-europe.dk
$if-icon-flag-europe-ee IDS_ICONS_Icon_Flag-europe_Ee .if.icon.flag-europe.ee
$if-icon-flag-europe-es-ct IDS_ICONS_Icon_Flag-europe_Es_ct .if.icon.flag-europe.es-ct
$if-icon-flag-europe-es-ga IDS_ICONS_Icon_Flag-europe_Es_ga .if.icon.flag-europe.es-ga
$if-icon-flag-europe-es IDS_ICONS_Icon_Flag-europe_Es .if.icon.flag-europe.es
$if-icon-flag-europe-fi IDS_ICONS_Icon_Flag-europe_Fi .if.icon.flag-europe.fi
$if-icon-flag-europe-fo IDS_ICONS_Icon_Flag-europe_Fo .if.icon.flag-europe.fo
$if-icon-flag-europe-fr IDS_ICONS_Icon_Flag-europe_Fr .if.icon.flag-europe.fr
$if-icon-flag-europe-gb-eng IDS_ICONS_Icon_Flag-europe_Gb_eng .if.icon.flag-europe.gb-eng
$if-icon-flag-europe-gb-nir IDS_ICONS_Icon_Flag-europe_Gb_nir .if.icon.flag-europe.gb-nir
$if-icon-flag-europe-gb-sct IDS_ICONS_Icon_Flag-europe_Gb_sct .if.icon.flag-europe.gb-sct
$if-icon-flag-europe-gb-wls IDS_ICONS_Icon_Flag-europe_Gb_wls .if.icon.flag-europe.gb-wls
$if-icon-flag-europe-gb IDS_ICONS_Icon_Flag-europe_Gb .if.icon.flag-europe.gb
$if-icon-flag-europe-ge IDS_ICONS_Icon_Flag-europe_Ge .if.icon.flag-europe.ge
$if-icon-flag-europe-gf IDS_ICONS_Icon_Flag-europe_Gf .if.icon.flag-europe.gf
$if-icon-flag-europe-gg IDS_ICONS_Icon_Flag-europe_Gg .if.icon.flag-europe.gg
$if-icon-flag-europe-gi IDS_ICONS_Icon_Flag-europe_Gi .if.icon.flag-europe.gi
$if-icon-flag-europe-gl IDS_ICONS_Icon_Flag-europe_Gl .if.icon.flag-europe.gl
$if-icon-flag-europe-gp IDS_ICONS_Icon_Flag-europe_Gp .if.icon.flag-europe.gp
$if-icon-flag-europe-gr IDS_ICONS_Icon_Flag-europe_Gr .if.icon.flag-europe.gr
$if-icon-flag-europe-hr IDS_ICONS_Icon_Flag-europe_Hr .if.icon.flag-europe.hr
$if-icon-flag-europe-hu IDS_ICONS_Icon_Flag-europe_Hu .if.icon.flag-europe.hu
$if-icon-flag-europe-id IDS_ICONS_Icon_Flag-europe_Id .if.icon.flag-europe.id
$if-icon-flag-europe-ie IDS_ICONS_Icon_Flag-europe_Ie .if.icon.flag-europe.ie
$if-icon-flag-europe-im IDS_ICONS_Icon_Flag-europe_Im .if.icon.flag-europe.im
$if-icon-flag-europe-is IDS_ICONS_Icon_Flag-europe_Is .if.icon.flag-europe.is
$if-icon-flag-europe-it IDS_ICONS_Icon_Flag-europe_It .if.icon.flag-europe.it
$if-icon-flag-europe-je IDS_ICONS_Icon_Flag-europe_Je .if.icon.flag-europe.je
$if-icon-flag-europe-li IDS_ICONS_Icon_Flag-europe_Li .if.icon.flag-europe.li
$if-icon-flag-europe-lt IDS_ICONS_Icon_Flag-europe_Lt .if.icon.flag-europe.lt
$if-icon-flag-europe-lu IDS_ICONS_Icon_Flag-europe_Lu .if.icon.flag-europe.lu
$if-icon-flag-europe-lv IDS_ICONS_Icon_Flag-europe_Lv .if.icon.flag-europe.lv
$if-icon-flag-europe-ma IDS_ICONS_Icon_Flag-europe_Ma .if.icon.flag-europe.ma
$if-icon-flag-europe-mc IDS_ICONS_Icon_Flag-europe_Mc .if.icon.flag-europe.mc
$if-icon-flag-europe-md IDS_ICONS_Icon_Flag-europe_Md .if.icon.flag-europe.md
$if-icon-flag-europe-mf IDS_ICONS_Icon_Flag-europe_Mf .if.icon.flag-europe.mf
$if-icon-flag-europe-mk IDS_ICONS_Icon_Flag-europe_Mk .if.icon.flag-europe.mk
$if-icon-flag-europe-mq IDS_ICONS_Icon_Flag-europe_Mq .if.icon.flag-europe.mq
$if-icon-flag-europe-mt IDS_ICONS_Icon_Flag-europe_Mt .if.icon.flag-europe.mt
$if-icon-flag-europe-nl IDS_ICONS_Icon_Flag-europe_Nl .if.icon.flag-europe.nl
$if-icon-flag-europe-no IDS_ICONS_Icon_Flag-europe_No .if.icon.flag-europe.no
$if-icon-flag-europe-pl IDS_ICONS_Icon_Flag-europe_Pl .if.icon.flag-europe.pl
$if-icon-flag-europe-pt IDS_ICONS_Icon_Flag-europe_Pt .if.icon.flag-europe.pt
$if-icon-flag-europe-re IDS_ICONS_Icon_Flag-europe_Re .if.icon.flag-europe.re
$if-icon-flag-europe-ro IDS_ICONS_Icon_Flag-europe_Ro .if.icon.flag-europe.ro
$if-icon-flag-europe-rs IDS_ICONS_Icon_Flag-europe_Rs .if.icon.flag-europe.rs
$if-icon-flag-europe-ru IDS_ICONS_Icon_Flag-europe_Ru .if.icon.flag-europe.ru
$if-icon-flag-europe-se IDS_ICONS_Icon_Flag-europe_Se .if.icon.flag-europe.se
$if-icon-flag-europe-si IDS_ICONS_Icon_Flag-europe_Si .if.icon.flag-europe.si
$if-icon-flag-europe-sj IDS_ICONS_Icon_Flag-europe_Sj .if.icon.flag-europe.sj
$if-icon-flag-europe-sk IDS_ICONS_Icon_Flag-europe_Sk .if.icon.flag-europe.sk
$if-icon-flag-europe-sm IDS_ICONS_Icon_Flag-europe_Sm .if.icon.flag-europe.sm
LIBERTAS
$if-icon-flag-europe-ua IDS_ICONS_Icon_Flag-europe_Ua .if.icon.flag-europe.ua
$if-icon-flag-europe-va IDS_ICONS_Icon_Flag-europe_Va .if.icon.flag-europe.va
$if-icon-flag-europe-xk IDS_ICONS_Icon_Flag-europe_Xk .if.icon.flag-europe.xk

If icons

Token Mixin Class Example
$if-icon-flag-if-dk IDS_ICONS_Icon_Flag-if_Dk .if.icon.flag-if.dk
$if-icon-flag-if-ee IDS_ICONS_Icon_Flag-if_Ee .if.icon.flag-if.ee
$if-icon-flag-if-fi IDS_ICONS_Icon_Flag-if_Fi .if.icon.flag-if.fi
$if-icon-flag-if-gb IDS_ICONS_Icon_Flag-if_Gb .if.icon.flag-if.gb
$if-icon-flag-if-gl IDS_ICONS_Icon_Flag-if_Gl .if.icon.flag-if.gl
$if-icon-flag-if-lt IDS_ICONS_Icon_Flag-if_Lt .if.icon.flag-if.lt
$if-icon-flag-if-lv IDS_ICONS_Icon_Flag-if_Lv .if.icon.flag-if.lv
$if-icon-flag-if-no IDS_ICONS_Icon_Flag-if_No .if.icon.flag-if.no
$if-icon-flag-if-ru IDS_ICONS_Icon_Flag-if_Ru .if.icon.flag-if.ru
$if-icon-flag-if-se IDS_ICONS_Icon_Flag-if_Se .if.icon.flag-if.se

Oceania icons

Token Mixin Class Example
$if-icon-flag-oceania-as IDS_ICONS_Icon_Flag-oceania_As .if.icon.flag-oceania.as
$if-icon-flag-oceania-au IDS_ICONS_Icon_Flag-oceania_Au .if.icon.flag-oceania.au
$if-icon-flag-oceania-ck IDS_ICONS_Icon_Flag-oceania_Ck .if.icon.flag-oceania.ck
$if-icon-flag-oceania-fj IDS_ICONS_Icon_Flag-oceania_Fj .if.icon.flag-oceania.fj
$if-icon-flag-oceania-fm IDS_ICONS_Icon_Flag-oceania_Fm .if.icon.flag-oceania.fm
$if-icon-flag-oceania-gu IDS_ICONS_Icon_Flag-oceania_Gu .if.icon.flag-oceania.gu
GUAMGUAM
$if-icon-flag-oceania-ki IDS_ICONS_Icon_Flag-oceania_Ki .if.icon.flag-oceania.ki
$if-icon-flag-oceania-mh IDS_ICONS_Icon_Flag-oceania_Mh .if.icon.flag-oceania.mh
$if-icon-flag-oceania-mp IDS_ICONS_Icon_Flag-oceania_Mp .if.icon.flag-oceania.mp
$if-icon-flag-oceania-nc IDS_ICONS_Icon_Flag-oceania_Nc .if.icon.flag-oceania.nc
$if-icon-flag-oceania-nf IDS_ICONS_Icon_Flag-oceania_Nf .if.icon.flag-oceania.nf
$if-icon-flag-oceania-nr IDS_ICONS_Icon_Flag-oceania_Nr .if.icon.flag-oceania.nr
$if-icon-flag-oceania-nu IDS_ICONS_Icon_Flag-oceania_Nu .if.icon.flag-oceania.nu
$if-icon-flag-oceania-nz IDS_ICONS_Icon_Flag-oceania_Nz .if.icon.flag-oceania.nz
$if-icon-flag-oceania-pf IDS_ICONS_Icon_Flag-oceania_Pf .if.icon.flag-oceania.pf
$if-icon-flag-oceania-pg IDS_ICONS_Icon_Flag-oceania_Pg .if.icon.flag-oceania.pg
$if-icon-flag-oceania-pn IDS_ICONS_Icon_Flag-oceania_Pn .if.icon.flag-oceania.pn
$if-icon-flag-oceania-pw IDS_ICONS_Icon_Flag-oceania_Pw .if.icon.flag-oceania.pw
$if-icon-flag-oceania-sb IDS_ICONS_Icon_Flag-oceania_Sb .if.icon.flag-oceania.sb
$if-icon-flag-oceania-tk IDS_ICONS_Icon_Flag-oceania_Tk .if.icon.flag-oceania.tk
$if-icon-flag-oceania-to IDS_ICONS_Icon_Flag-oceania_To .if.icon.flag-oceania.to
$if-icon-flag-oceania-tv IDS_ICONS_Icon_Flag-oceania_Tv .if.icon.flag-oceania.tv
$if-icon-flag-oceania-vu IDS_ICONS_Icon_Flag-oceania_Vu .if.icon.flag-oceania.vu
$if-icon-flag-oceania-wf IDS_ICONS_Icon_Flag-oceania_Wf .if.icon.flag-oceania.wf
$if-icon-flag-oceania-ws IDS_ICONS_Icon_Flag-oceania_Ws .if.icon.flag-oceania.ws

Rest icons

Token Mixin Class Example
$if-icon-flag-rest-eu IDS_ICONS_Icon_Flag-rest_Eu .if.icon.flag-rest.eu
$if-icon-flag-rest-un IDS_ICONS_Icon_Flag-rest_Un .if.icon.flag-rest.un

Icon size

Name Value Pixels Example
$ids-icon-size-8 0.5rem 8px
$ids-icon-size-16 1rem 16px
$ids-icon-size-20 1.25rem 20px
$ids-icon-size-24 1.5rem 24px
$ids-icon-size-32 2rem 32px
$ids-icon-size-xxs 0.5rem 8px
$ids-icon-size-xs 1rem 16px
$ids-icon-size-sm 1.25rem 20px
$ids-icon-size-default 1.5rem 24px
$ids-icon-size-md 1.5rem 24px
$ids-icon-size-lg 2rem 32px
Edit this section, Opens in new window

App development

For application development, we also expose tokens for native app development, like Android and IOS. We also expose tokens for JavaScript development.

JavaScript

We expose this file: @ids-core/icons/src/variables/js/variables.esm.js, in this format:

export const SizeIcon8 = "0.5rem";
export const SizeIcon12 = "0.75rem";
export const SizeIcon16 = "1rem";
export const SizeIcon18 = "1.125rem"; // 18px
export const SizeIcon20 = "1.25rem";
export const SizeIcon24 = "1.5rem";
export const SizeIcon28 = "1.75rem";
export const SizeIcon32 = "2rem";

This can be used like so:

import { SizeIcon32 } from '@ids-core/icons/src/variables/js/variables.module.js';

const myIoon = ({ icon }) => (<span style={{ backgroundSize: SizeIcon32 SizeIcon32 }})/>);

Android

For Android development, you might be interested in this file: @ids-core/icons/src/variables/android/dimens.xml, in this format:

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <dimen name="size_icon_8">8.00dp</dimen>
    <dimen name="size_icon_12">12.00dp</dimen>
    <dimen name="size_icon_16">16.00dp</dimen>
    <dimen name="size_icon_18">18.00sp</dimen><!-- 18px -->
    <dimen name="size_icon_20">20.00dp</dimen>
    <dimen name="size_icon_24">24.00dp</dimen>
    <dimen name="size_icon_28">28.00dp</dimen>
    <dimen name="size_icon_32">32.00dp</dimen>
</resources>

IOS

For IOS development, we have IfDesignSystemIconSize.h and IfDesignSystemIconSize.m under src/variables/ios, and IfDesignSystem.swift and IfDesignSystemIconSize.swift under src/variables/ios-swift.

Flutter

We also have ifdesignsystem_iconsize.dart under src/variables/flutter.

Edit this section, Opens in new window

Accessibility

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

16.0.0 (2023-01-10)

⚠ BREAKING CHANGES

  • Checkboxes - smaller with rounded corners. Checked state - thicker checkmark,

filled background.Radio-buttons - smaller buttons, rounded focus.

  • Merged PR 93047: feat(checkbox radio-buttons): style improvements for checkboxes and radio-but... (0ddda18), closes #672478 #672478

14.26.0 (2022-07-05)

Features

  • icons: add icons for webshop: multiple, setup-preferences and books (2c005f1) , closes #628591

14.23.0 (2022-05-06)

Features

  • icons: move Relax icons into @ids-core/icons (b2ce865) , closes #588416

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.19.0 (2022-04-13)

Documentation Updates

  • ✏️ Update documentation elements to prepare for Dark Mode (7b0b859) . We are utilizing some of the IDS components when documenting our components, and these elements needed to be updated with the .ids-doc CSS flag so we can add themes to them. In the same change, we also ammended some of the documentation to be more up to speed with current state.

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.18.0 (2022-04-08)

Bug Fixes

14.13.0 (2022-04-06)

Bug Fixes

  • 🐛 Encode data-value in design token documentation (85737c6)

14.11.1 (2022-03-18)

Bug Fixes

  • 🐛 Add missing fill for svg file (86b5708)

  • 🐛 Update links to icons (dae49d9)

  • 🐛 Use double quotes instead of single quotes (13b6ced)

  • Proper icon json generation (a1cd1e9)

rebuild (773a033)

Code Refactoring

  • 💡 Remove generation of resources/icons page (46ca512) , closes #479996

  • 🤖 Remove old files (d59daa4)

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.2 (2022-02-23)

Code Refactoring

  • Use new token naming convention (f097dca)

reinstall (d425056)

bootstrap (9a713df)

14.7.0 (2022-02-17)

Miscellaneous chores

  • 🤖 Prepare icons for theme support, take 1 (6994803)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

14.3.0 (2022-02-09)

Bug Fixes

Code Refactoring

  • 💡 Remove unwanted code (c3ea2ae)

  • Add engines for all packages (e95dfff)

  • attempt to fix mobile generation (185efce)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

  • 💡 Change focus styles, remove whatinput (75fd31b) , closes #505205

14.2.0 (2021-12-08)

Bug Fixes

  • 🐛 Use correct heading hierarchy for design documentation (6c54ae4) , closes #511303

  • rebuild and reinstall (f9fb687)

reinstall (885c74b)

14.1.4 (2021-11-24)

Documentation Updates

  • ✏️ Use correct links (a77dde4)

14.1.0 (2021-11-16)

Features

14.0.4 (2021-11-15)

Documentation Updates

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

⚠ BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from @if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core
  • 🧨 The Social icons category is now removed, it has been replaced by SoMe
  • 🧨 faq icon renamed to faq-bubble
  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
  • 🧨 Navigation structure has now changed. Please see release notes!

Documentation Updates

  • ✏️ Adjust documentation (8e77c36)

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Split out CSS documentation (94d7d81) , closes #467386

  • ✏️ Update links and change navigation structure (0bfd27d) , closes #490579

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Forgot to update icons token generation (1eac0d5) , closes #490579

  • 💡 Rename faq icon to faq-bubble, to avoid collision (c302048)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • 💡 Use scripts folder instead of lib for scripts (642f36d)

  • another change in the structure (38a0d2e)

Miscellaneous chores

  • 🤖 Add missing content to README.md (d72d2ca)

  • 🤖 Prune changelogs (2c660c2)

  • 🤖 Remove file no longer required (1588ef2)

  • 🤖 Remove Social icons category (209b68a) , closes #349773

  • 🤖 Rename util to utils (f78721f)

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.10.0 (2021-10-07)

Features

  • 🎸 Add dishwasher and spa icons in symbol group (e3682d6) , closes #481680

13.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.1 (2021-09-15)

Bug Fixes

  • 🐛 Make sure we are using a string for color (9b51d7d)

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

13.5.0 (2021-09-06)

Documentation Updates

  • ✏️ Update documentation for navigation card change (0379db5)

13.3.0 (2021-09-02)

Features

Bug Fixes

  • 🐛 Custom sanitation for flag svgs, custom title for flags (4dfd494)

  • 🐛 Use correct name for Antarctica (167d869)

  • 🤖 Update flag icons (dccff59)

bootstrap (d23e139)

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.14.0 (2021-08-11)

Features

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)

  • 🐛 We don't need lastModified (e458a12)

12.3.0 (2021-05-19)

Bug Fixes

  • 🐛 Use correct category for icon documentation (3dbb6dc)

Documentation Updates

  • ✏️ Documentation fixes (ad1882a)

12.2.0 (2021-05-10)

Features

  • 🎸 Add new product icons (4fd1e1e)

  • testing if_icons.json generation (bb87731)

12.1.0 (2021-05-07)

Features

  • 🎸 Add tokens for icon size and replace theo with style-di (0be291e) . ctionary

Documentation Updates

  • ✏️ Add better design token docs for icons (dbfa8bd)

Miscellaneous chores

  • 🤖 Improve look and feel of tokens (93a6322)

12.0.0 (2021-05-05)

⚠ BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner
  • 🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
  • 🧨 Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts

Features

  • 🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component

Bug Fixes

Documentation Updates

  • ✏️ Rearrange documentation structure (47ea594)

Code Refactoring

Miscellaneous chores

  • 🤖 Convert util tokens from theo to style-dictionary (99fb4f5)

  • 🤖 Reinstall (2c763ea)

  • 🤖 Reinstall (69e1a5b)

  • 🤖 Update references to util variables (b79ec36)

  • 🤖 Use correct classnames for icon button icons (be5f502)

  • 🤖 Use icon-card instead of old card component for icons (841b7b1)

rebuild (7edb430)

10.1.0 (2021-02-18)

Features

Code Refactoring

Miscellaneous chores

  • 🤖 Build resource page for icons (d2e2c94)

  • 🤖 Remove old feature needed for sketch generation (fec33e4)

  • 🤖 Rename Change Log to Changelog (d412e63)

  • 🤖 Remove all references to sketch (35fc554) , closes #339203

  • 🤖 Update package fields (200c0af)

10.0.0 (2021-02-15)

Features

9.2.0 (2021-01-25)

Features

  • 🎸 Add element for no results (698593b)

Bug Fixes

  • 🐛 Fix set id for product icons (cc3dc15)

Miscellaneous chores

  • 🤖 Add link to nucleo import file (d64b6d7)

  • 🤖 Regenerate icon documentation and remove tag usage (38e7a9b)

  • 🤖 Use a distinct title for the icon page holder (249fc44)

9.1.0 (2021-01-24)

Features

  • 🎸 Add icon search feature, new page for icons (f4290a2) , closes #325581

Bug Fixes

  • 🐛 Fix typo for some icons (78a1138)

  • 🤖 Remove old generated icon documentation files (3bb8294)

  • 🤖 Update files after typo fix for icons (a6cce0d)

8.1.0 (2020-12-18)

Features

  • 🎸 Add generation of js files for classNames (7f47e5e)

Miscellaneous chores

7.13.0 (2020-12-10)

Features

Bug Fixes

  • 🐛 Use correct stroke-width (ea7f9ea)

Documentation Updates

  • ✏️ Update icon documentation (2b904a3)

7.11.0 (2020-12-08)

Features

  • 🎸 Add speech-bubble icon (a4b18b3)

7.8.0 (2020-11-30)

Features

  • 🎸 Add new color for icons, disabled (68c5c5e) . Also refactored genertation of icon mixins and files to reduce the footprint.

Bug Fixes

  • 🐛 Rename card.svg to bank-card.svg so it will not conflict (ad727ca) . with .if.card

Documentation Updates

  • ✏️ Amend icon documentation, split into design-components (30e4b15)

  • ✏️ Update icon component documentation with color usage (a5d5ec7)

Miscellaneous chores

  • 🤖 Add test, demo and dev files for icons (8e11f93)

  • 🤖 Change base color of svgs from #111 to #331 e11 (7ecc5fb) , closes #331e11

  • 🤖 Make sure the icon refactoring is backwards compatible (6bb273d)

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600) , closes #309650

6.45.0 (2020-11-12)

Features

6.43.3 (2020-11-03)

Miscellaneous chores

  • 🤖 Manually set version (e4d9ca6)

  • 🤖 Rename repository from guybrush to if-design-system (c18bccd)

reinstall (2cefe15)

6.31.0 (2020-09-25)

Features

  • 🎸 Add more-horizontal-filled icon (a8529b8)

6.29.4 (2020-09-09)

Documentation Updates

  • ✏️ Use correct strong element with if class (6b484df)

6.28.0 (2020-09-02)

Features

  • 🎸 Add arrow icons, for pagination and autocomplete (e1ee657)

6.27.0 (2020-08-27)

Features

  • 🎸 Add new icon, return arrow down left (1ba60f3)

  • 🎸 Add new icon: arrow back top left (1169162)

6.26.14 (2020-08-04)

Documentation Updates

  • ✏️ Update documentation layout (4566228)

6.26.12 (2020-08-03)

Miscellaneous chores

  • 🤖 lerna bootstrap (d835ec9)

  • 🤖 Temporarily remove package-lock.json-files (87b3f7f)

  • 🤖 Update references to new scope (b5575dd)

6.26.10 (2020-07-14)

Miscellaneous chores

  • 🤖 Manually update some links (ecc0133)

  • 🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)

6.25.0 (2020-07-07)

Features

  • 🎸 Add document icons (072c7a5)

Bug Fixes

Documentation Updates

  • ✏️ Add documentation about icon sizes (2132688) , closes #269039

6.23.0 (2020-07-01)

Miscellaneous chores

reinstall (1ab1527)

6.22.0 (2020-07-01)

Documentation Updates

  • ✏️ Update color documentation, more examples + guidelines (40aa854)

  • ✏️ Update documentation layout (816053b)

Miscellaneous chores

  • 🤖 Search and replace old color usage (3e5abb0)

6.21.6 (2020-06-11)

Miscellaneous chores

  • 🤖 Remove .zip files from .npmignore (b3bc7dc)

6.21.0 (2020-06-04)

Documentation Updates

  • ✏️ Improvements for documentation site (83680e4)

6.19.0 (2020-06-02)

Miscellaneous chores

  • 🤖 Give notice that files are not ment to be edited (a6cebb9)

  • 🤖 Update preprocessor files for tabs (3e39845)

reinstall (3416c65)

6.17.1 (2020-05-25)

Bug Fixes

  • 🐛 Remove classname from svgs to prevent an unwanted fill to be set (74accda)

6.15.5 (2020-05-15)

Miscellaneous chores

gatsbify (0e07d68)

  • prepped and ready to separate documentation site from code (d3e1fd9)

  • pruning and reinstalling (5cda0bc)

reinstall (939dae6)

reinstall (cae55fb)

6.15.4 (2020-05-14)

Miscellaneous chores

6.15.2 (2020-05-11)

Miscellaneous chores

6.15.0 (2020-05-07)

Miscellaneous chores

6.13.0 (2020-05-04)

Features

  • 🎸 Add more video related icons (2c42dc1)

6.12.1 (2020-04-27)

Bug Fixes

  • 🐛 Fix missing fonts issue (2034e62)

6.10.9 (2020-04-22)

Miscellaneous chores

  • 🤖 Add *.zip-files to .npmignore-files (062b8b0)

  • 🤖 Remove references to verb in package.json files (cfdaaec)

6.10.6 (2020-04-17)

Miscellaneous chores

6.7.0 (2020-04-10)

Features

6.6.0 (2020-04-09)

Documentation Updates

  • ✏️ Change edit this document to edit this section (791b646)

6.5.4 (2020-04-08)

Bug Fixes

  • 🐛 Fix icon overview images (cbb2bcd) , closes #240231

  • 🐛 Fix lists in icon style overview (c5af469)

  • 🐛 Replace missing icon (d14744b)

  • 🐛 Use correct notification class names for icons (591a780)

  • 🐛 Use headings instead of strong tags (1e05f80)

6.5.3 (2020-04-06)

Documentation Updates

  • ✏️ Some more sg updates and tweaks (d1d6802)

6.3.2 (2020-03-31)

Documentation Updates

  • ✏️ Replace sg.message with if.notification (5d1aa99)

6.1.0 (2020-03-25)

Features

  • 🎸 Add new icon for image (ab83abf)

5.3.0 (2020-03-18)

Features

  • 🎸 Add icons for play and pause (54c7667)

5.2.0 (2020-03-17)

Code Refactoring

  • 💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother

5.0.4 (2020-03-14)

Miscellaneous chores

  • 🤖 Delete really old install files, update README files (c5d4893)

  • 🤖 Remove .npmrc fles (4e26249)

5.0.1-alpha.160 (2020-03-12)

Miscellaneous chores

5.0.1-alpha.151 (2020-03-05)

Bug Fixes

  • 🐛 Make spacing between icon name and icon smaller (1891489)

Miscellaneous chores

5.0.1-alpha.149 (2020-03-05)

Miscellaneous chores

  • 🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables

  • lerna bootstrap (d8f8383)

5.0.1-alpha.147 (2020-03-02)

Features

  • 🎸 Make the documentation a bit more responsive (2d4278e)

Miscellaneous chores

  • 🤖 Adjusted documentation system to be a tad fresher (c97ff4d)

  • 🤖 Increase size of small icons in icon preview (d1ce675)

  • lerna bootstrap (218a647)

  • lerna bootstrap (672c766)

  • lerna bootstrap (4d64d70)

5.0.1-alpha.143 (2020-02-26)

Documentation Updates

5.0.1-alpha.127 (2020-02-18)

Features

  • 🎸 Add youtube icon to design system (8bd2cdf)

5.0.1-alpha.118 (2020-02-10)

Miscellaneous chores

  • 🤖 Add less and scss for footer and logo (7dc0830)

5.0.1-alpha.117 (2020-02-06)

Documentation Updates

  • ✏️ Add edit links to documentation files (7c6e770)

5.0.1-alpha.113 (2020-01-22)

Features

  • 🎸 Add icon mixins for LESS (fdea651)

5.0.1-alpha.112 (2020-01-22)

Bug Fixes

  • 🐛 Increase the viewbox by 1 so the icon is not cut off (5439d56)

Miscellaneous chores

  • 🤖 Regenerate icons after fixing viewbox on check-circle (f39d78c)

5.0.1-alpha.109 (2020-01-20)

Features

  • 🎸 Add check circle icon (e418695)

  • 🎸 Add icon sketch feature (3eeceba)

  • 🎸 Finally nailed correct sketch export of icons! (dc7b7df)

Miscellaneous chores

5.0.1-alpha.79 (2019-12-03)

Documentation Updates

  • ✏️ Scope all examples to .if (26bd7cd)

5.0.1-alpha.75 (2019-11-29)

Miscellaneous chores

  • 🤖 Remove filled star (38b129e)

5.0.1-alpha.74 (2019-11-29)

Features

  • 🎸 Add filled star icon (7391e64)

Miscellaneous chores

5.0.1-alpha.70 (2019-11-28)

Miscellaneous chores

  • 🤖 Remove polymer, updated styling accordingly (04e1941)

5.0.1-alpha.62 (2019-11-24)

Documentation Updates

  • ✏️ Add link for message (43c7da5)

Miscellaneous chores

  • 🤖 Some documentation fixes (8d66129)

5.0.1-alpha.61 (2019-11-22)

Features

  • 🎸 Add mixins for icons (f2f3420)

5.0.1-alpha.58 (2019-11-22)

Features

  • 🎸 Remove normalize.css (2c23c2b)

Miscellaneous chores

5.0.1-alpha.57 (2019-11-22)

Miscellaneous chores

5.0.1-alpha.45 (2019-11-08)

Features

  • 🎸 Add icon and util scss files (129bdb4)

5.0.1-alpha.43 (2019-11-07)

Miscellaneous chores

  • 🤖 Finished adding desktop styles for crosslinks (62f11f4)

5.0.1-alpha.42 (2019-11-05)

Miscellaneous chores

5.0.1-alpha.40 (2019-11-05)

Bug Fixes

  • 🐛 Fix typography based on latest sketches (2653b61)

5.0.1-alpha.28 (2019-10-29)

Features

  • 🎸 Add support for filled path svgs (2c1ae81)

Miscellaneous chores

5.0.1-alpha.23 (2019-10-23)

Documentation Updates

  • ✏️ Update documentation with download teasers (f0ca966)

5.0.1-alpha.22 (2019-10-23)

Documentation Updates

  • ✏️ Update VID documentation (3b1fdd7) . Updated from pdf file. Added .ase file downloads, logotype downloads

5.0.1-alpha.20 (2019-10-22)

Miscellaneous chores

5.0.1-alpha.13 (2019-10-16)

Miscellaneous chores

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

  • 🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Features

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

  • 🎸 Documentation update and add some icons (df1cc97)

  • 🎸 FIrst iteration of support of line icons only (0ff78ba)

Bug Fixes

  • 🐛 Fix icon stylus generation (2b6d19b)

  • 🐛 Last fixes before merge (da2810d)

  • 🐛 Regroup icons and add symbol icons (4b0c209)

Miscellaneous chores

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Start adding new icon package (89ff365)

5.0.1-alpha.9 (2019-10-14)

Miscellaneous chores

  • 🤖 Update layout and hierarchy PT2 (860aef5)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Features

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

  • 🎸 Documentation update and add some icons (df1cc97)

  • 🎸 FIrst iteration of support of line icons only (0ff78ba)

Bug Fixes

  • 🐛 Fix icon stylus generation (2b6d19b)

  • 🐛 Last fixes before merge (da2810d)

  • 🐛 Regroup icons and add symbol icons (4b0c209)

Miscellaneous chores

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Start adding new icon package (89ff365)

5.0.1-alpha.4 (2019-10-08)

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (5291127)

5.0.1-alpha.3 (2019-10-04)

Features

Miscellaneous chores

  • 🤖 npm i && lerna bootstrap (135f0ac)

5.0.1-alpha.1 (2019-09-30)

Features

  • 🎸 Documentation update and add some icons (df1cc97)

  • 🎸 FIrst iteration of support of line icons only (0ff78ba)

Bug Fixes

  • 🐛 Fix icon stylus generation (2b6d19b)

  • 🐛 Last fixes before merge (da2810d)

  • 🐛 Regroup icons and add symbol icons (4b0c209)

Miscellaneous chores

  • 🤖 Remove old verb files (7e23286)

  • 🤖 Start adding new icon package (89ff365)

Edit this section, Opens in new window
Contact us, Opens in new window