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 windowUsage
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>
<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.
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>
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.”
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 ]();
}
Tokens
Icons
Coverage icons
Token | Mixin | Class | Example |
---|---|---|---|
$if-icon-coverage-animal |
|||
$if-icon-coverage-bagage-delay |
|||
$if-icon-coverage-boat-collision |
|||
$if-icon-coverage-boat-grounding |
|||
$if-icon-coverage-boat-sinking |
|||
$if-icon-coverage-building-damage |
|||
$if-icon-coverage-candle |
|||
$if-icon-coverage-car-collision |
|||
$if-icon-coverage-car-fire |
|||
$if-icon-coverage-car-vandalism |
|||
$if-icon-coverage-care |
|||
$if-icon-coverage-disability |
|||
$if-icon-coverage-engine |
|||
$if-icon-coverage-evacuation |
|||
$if-icon-coverage-faq-bubble |
|||
$if-icon-coverage-flight-cancelled |
|||
$if-icon-coverage-flight-delayed |
|||
$if-icon-coverage-fridge |
|||
$if-icon-coverage-glass-damage |
|||
$if-icon-coverage-heating-system |
|||
$if-icon-coverage-law |
|||
$if-icon-coverage-lost-bagage |
|||
$if-icon-coverage-misfuellling |
|||
$if-icon-coverage-parking |
|||
$if-icon-coverage-power-failure |
|||
$if-icon-coverage-rental-car |
|||
$if-icon-coverage-sanitation |
|||
$if-icon-coverage-school |
|||
$if-icon-coverage-small-child |
|||
$if-icon-coverage-snow |
|||
$if-icon-coverage-tooth |
|||
$if-icon-coverage-tv-stand |
|||
$if-icon-coverage-vermin |
|||
$if-icon-coverage-wallet |
|||
$if-icon-coverage-wheel |
|||
$if-icon-coverage-windshield-damage |
|||
$if-icon-coverage-world-pin |
Product icons
Token | Mixin | Class | Example |
---|---|---|---|
$if-icon-product-accident |
|||
$if-icon-product-adult-50-plus |
|||
$if-icon-product-adult-60-plus |
|||
$if-icon-product-ai |
|||
$if-icon-product-antique-car |
|||
$if-icon-product-apartment |
|||
$if-icon-product-assistance |
|||
$if-icon-product-atv |
|||
$if-icon-product-au-pair |
|||
$if-icon-product-bag |
|||
$if-icon-product-bike |
|||
$if-icon-product-boat |
|||
$if-icon-product-bodyshop |
|||
$if-icon-product-building |
|||
$if-icon-product-bulldozer |
|||
$if-icon-product-bus |
|||
$if-icon-product-camera-flash |
|||
$if-icon-product-camper |
|||
$if-icon-product-car |
|||
$if-icon-product-caravan |
|||
$if-icon-product-cat |
|||
$if-icon-product-cement-truck |
|||
$if-icon-product-change-of-ownership |
|||
$if-icon-product-child-2-25yo |
|||
$if-icon-product-child |
|||
$if-icon-product-cloud-light |
|||
$if-icon-product-collection-truck |
|||
$if-icon-product-company-daughter |
|||
$if-icon-product-company-division |
|||
$if-icon-product-company |
|||
$if-icon-product-cottage |
|||
$if-icon-product-critical-illness |
|||
$if-icon-product-death |
|||
$if-icon-product-diamond |
|||
$if-icon-product-dog |
|||
$if-icon-product-favorite |
|||
$if-icon-product-flooding |
|||
$if-icon-product-forest |
|||
$if-icon-product-forklift |
|||
$if-icon-product-furnished-property |
|||
$if-icon-product-glasses |
|||
$if-icon-product-globe |
|||
$if-icon-product-handout |
|||
$if-icon-product-health |
|||
$if-icon-product-home |
|||
$if-icon-product-horse |
|||
$if-icon-product-if-start |
|||
$if-icon-product-it-security |
|||
$if-icon-product-laptop |
|||
$if-icon-product-large-truck |
|||
$if-icon-product-legal |
|||
$if-icon-product-liability |
|||
$if-icon-product-life |
|||
$if-icon-product-location |
|||
$if-icon-product-marine-cargo |
|||
$if-icon-product-mc |
|||
$if-icon-product-minicar |
|||
$if-icon-product-moped-car |
|||
$if-icon-product-moped-eu |
|||
$if-icon-product-moped |
|||
$if-icon-product-one-way-ticket |
|||
$if-icon-product-out-of-work-sickness |
|||
$if-icon-product-patch |
|||
$if-icon-product-paw |
|||
$if-icon-product-plane |
|||
$if-icon-product-pregnancy |
|||
$if-icon-product-scooter |
|||
$if-icon-product-semi-detached-house |
|||
$if-icon-product-ship |
|||
$if-icon-product-sickness |
|||
$if-icon-product-small-boat |
|||
$if-icon-product-smartphone |
|||
$if-icon-product-snowmobile |
|||
$if-icon-product-sport |
|||
$if-icon-product-stock |
|||
$if-icon-product-strike |
|||
$if-icon-product-student |
|||
$if-icon-product-tablet |
|||
$if-icon-product-terraced-house |
|||
$if-icon-product-theft-burglary |
|||
$if-icon-product-time-share-abroad |
|||
$if-icon-product-tractor |
|||
$if-icon-product-traffic |
|||
$if-icon-product-trailer |
|||
$if-icon-product-truck |
|||
$if-icon-product-used-car |
|||
$if-icon-product-van |
|||
$if-icon-product-vehicles |
|||
$if-icon-product-watch |
|||
$if-icon-product-water-damage |
Some icons
Token | Mixin | Class | Example |
---|---|---|---|
$if-icon-some-facebook |
|||
$if-icon-some-instagram |
|||
$if-icon-some-linkedin |
|||
$if-icon-some-twitter |
|||
$if-icon-some-youtube |
Symbol icons
Token | Mixin | Class | Example |
---|---|---|---|
$if-icon-symbol-add-notification |
|||
$if-icon-symbol-alarm |
|||
$if-icon-symbol-asterix |
|||
$if-icon-symbol-bedroom |
|||
$if-icon-symbol-bill |
|||
$if-icon-symbol-bookmark |
|||
$if-icon-symbol-bug |
|||
$if-icon-symbol-bulb-on |
|||
$if-icon-symbol-cargo |
|||
$if-icon-symbol-cart-return |
|||
$if-icon-symbol-cc |
|||
$if-icon-symbol-chart-bar |
|||
$if-icon-symbol-chatbot |
|||
$if-icon-symbol-coins |
|||
$if-icon-symbol-compass |
|||
$if-icon-symbol-curve-directions |
|||
$if-icon-symbol-deductible |
|||
$if-icon-symbol-dishwasher |
|||
$if-icon-symbol-doctor |
|||
$if-icon-symbol-document |
|||
$if-icon-symbol-drop |
|||
$if-icon-symbol-energy |
|||
$if-icon-symbol-factory |
|||
$if-icon-symbol-flag |
|||
$if-icon-symbol-globe |
|||
$if-icon-symbol-headphones-mic |
|||
$if-icon-symbol-heart-person |
|||
$if-icon-symbol-image |
|||
$if-icon-symbol-interest |
|||
$if-icon-symbol-knight |
|||
$if-icon-symbol-loop |
|||
$if-icon-symbol-love |
|||
$if-icon-symbol-man-symbol |
|||
$if-icon-symbol-man |
|||
$if-icon-symbol-mobile-chat |
|||
$if-icon-symbol-parent |
|||
$if-icon-symbol-people |
|||
$if-icon-symbol-percent-badge |
|||
$if-icon-symbol-receipt |
|||
$if-icon-symbol-report-claim |
|||
$if-icon-symbol-responsive |
|||
$if-icon-symbol-return-policy |
|||
$if-icon-symbol-security |
|||
$if-icon-symbol-single-body |
|||
$if-icon-symbol-single-copy |
|||
$if-icon-symbol-spa |
|||
$if-icon-symbol-star-filled |
|||
$if-icon-symbol-star |
|||
$if-icon-symbol-trophy |
|||
$if-icon-symbol-woman-symbol |
|||
$if-icon-symbol-woman |
|||
$if-icon-symbol-worker |
|||
$if-icon-symbol-wrench-tool |
Ui icons
Token | Mixin | Class | Example |
---|---|---|---|
$if-icon-ui-add-user |
|||
$if-icon-ui-arrow-back-top-left |
|||
$if-icon-ui-arrow-down |
|||
$if-icon-ui-arrow-left |
|||
$if-icon-ui-arrow-right |
|||
$if-icon-ui-arrow-up |
|||
$if-icon-ui-attach |
|||
$if-icon-ui-back-arrow |
|||
$if-icon-ui-bank-card |
|||
$if-icon-ui-books |
|||
$if-icon-ui-calculator |
|||
$if-icon-ui-camera |
|||
$if-icon-ui-chat |
|||
$if-icon-ui-check-circle |
|||
$if-icon-ui-check |
|||
$if-icon-ui-checkmark |
|||
$if-icon-ui-cheque |
|||
$if-icon-ui-chevron-down |
|||
$if-icon-ui-chevron-left |
|||
$if-icon-ui-chevron-right |
|||
$if-icon-ui-chevron-up |
|||
$if-icon-ui-chevrons-left |
|||
$if-icon-ui-chevrons-right |
|||
$if-icon-ui-clock |
|||
$if-icon-ui-close |
|||
$if-icon-ui-cockade |
|||
$if-icon-ui-cog |
|||
$if-icon-ui-computer-upload |
|||
$if-icon-ui-corner-left-round |
|||
$if-icon-ui-data-download |
|||
$if-icon-ui-data-upload |
|||
$if-icon-ui-date |
|||
$if-icon-ui-direct-edit |
|||
$if-icon-ui-dislike |
|||
$if-icon-ui-document-docx |
|||
$if-icon-ui-document-pdf |
|||
$if-icon-ui-document-pptx |
|||
$if-icon-ui-document-xlsx |
|||
$if-icon-ui-drop-down |
|||
$if-icon-ui-drop-left |
|||
$if-icon-ui-drop-right |
|||
$if-icon-ui-drop-up |
|||
$if-icon-ui-edit |
|||
$if-icon-ui-external-link |
|||
$if-icon-ui-file-download |
|||
$if-icon-ui-film |
|||
$if-icon-ui-filter |
|||
$if-icon-ui-fingerprint |
|||
$if-icon-ui-floppy-disk |
|||
$if-icon-ui-fullscreen |
|||
$if-icon-ui-handshake |
|||
$if-icon-ui-help |
|||
$if-icon-ui-hourglass |
|||
$if-icon-ui-house |
|||
$if-icon-ui-img |
|||
$if-icon-ui-incomming-call |
|||
$if-icon-ui-info |
|||
$if-icon-ui-invert |
|||
$if-icon-ui-leave |
|||
$if-icon-ui-like |
|||
$if-icon-ui-link |
|||
$if-icon-ui-list |
|||
$if-icon-ui-lock-open |
|||
$if-icon-ui-lock |
|||
$if-icon-ui-log-in |
|||
$if-icon-ui-log-out |
|||
$if-icon-ui-mail |
|||
$if-icon-ui-map-pin |
|||
$if-icon-ui-marker |
|||
$if-icon-ui-math |
|||
$if-icon-ui-megaphone |
|||
$if-icon-ui-menu |
|||
$if-icon-ui-microphone-off |
|||
$if-icon-ui-microphone |
|||
$if-icon-ui-microsoft |
|||
$if-icon-ui-minus |
|||
$if-icon-ui-more-horizontal-filled |
|||
$if-icon-ui-more-horizontal |
|||
$if-icon-ui-more-vertical |
|||
$if-icon-ui-multiple |
|||
$if-icon-ui-open-in-new |
|||
$if-icon-ui-outgoing-call |
|||
$if-icon-ui-pause-filled |
|||
$if-icon-ui-pause |
|||
$if-icon-ui-pencil |
|||
$if-icon-ui-person |
|||
$if-icon-ui-phone-call-end |
|||
$if-icon-ui-phone |
|||
$if-icon-ui-pin |
|||
$if-icon-ui-play-filled |
|||
$if-icon-ui-play |
|||
$if-icon-ui-plus |
|||
$if-icon-ui-preview-off |
|||
$if-icon-ui-preview |
|||
$if-icon-ui-printer |
|||
$if-icon-ui-real-estate |
|||
$if-icon-ui-recipe |
|||
$if-icon-ui-redo |
|||
$if-icon-ui-refresh |
|||
$if-icon-ui-replace |
|||
$if-icon-ui-resend |
|||
$if-icon-ui-return |
|||
$if-icon-ui-search |
|||
$if-icon-ui-secure-message |
|||
$if-icon-ui-send-message |
|||
$if-icon-ui-setup-preferences |
|||
$if-icon-ui-share |
|||
$if-icon-ui-shop |
|||
$if-icon-ui-shopping-bag |
|||
$if-icon-ui-shopping-cart |
|||
$if-icon-ui-signature |
|||
$if-icon-ui-single-folded |
|||
$if-icon-ui-sound |
|||
$if-icon-ui-speech-bubble |
|||
$if-icon-ui-stack |
|||
$if-icon-ui-subtitles |
|||
$if-icon-ui-tasks |
|||
$if-icon-ui-trashcan |
|||
$if-icon-ui-video-off |
|||
$if-icon-ui-volume-mute |
|||
$if-icon-ui-volume |
|||
$if-icon-ui-warning-light |
|||
$if-icon-ui-warning |
Flags
Africa icons
Token | Mixin | Class | Example |
---|---|---|---|
$if-icon-flag-africa-ao |
|||
$if-icon-flag-africa-bf |
|||
$if-icon-flag-africa-bi |
|||
$if-icon-flag-africa-bj |
|||
$if-icon-flag-africa-bw |
|||
$if-icon-flag-africa-cd |
|||
$if-icon-flag-africa-cf |
|||
$if-icon-flag-africa-cg |
|||
$if-icon-flag-africa-cm |
|||
$if-icon-flag-africa-cv |
|||
$if-icon-flag-africa-dj |
|||
$if-icon-flag-africa-dz |
|||
$if-icon-flag-africa-eg |
|||
$if-icon-flag-africa-eh |
|||
$if-icon-flag-africa-er |
|||
$if-icon-flag-africa-et |
|||
$if-icon-flag-africa-ga |
|||
$if-icon-flag-africa-gh |
|||
$if-icon-flag-africa-gm |
|||
$if-icon-flag-africa-gn |
|||
$if-icon-flag-africa-gq |
|||
$if-icon-flag-africa-gw |
|||
$if-icon-flag-africa-ke |
|||
$if-icon-flag-africa-km |
|||
$if-icon-flag-africa-lr |
|||
$if-icon-flag-africa-ls |
|||
$if-icon-flag-africa-ly |
|||
$if-icon-flag-africa-mg |
|||
$if-icon-flag-africa-ml |
|||
$if-icon-flag-africa-mr |
|||
$if-icon-flag-africa-mu |
|||
$if-icon-flag-africa-mw |
|||
$if-icon-flag-africa-mz |
|||
$if-icon-flag-africa-na |
|||
$if-icon-flag-africa-ne |
|||
$if-icon-flag-africa-ng |
|||
$if-icon-flag-africa-om |
|||
$if-icon-flag-africa-rw |
|||
$if-icon-flag-africa-sa |
|||
$if-icon-flag-africa-sc |
|||
$if-icon-flag-africa-sd |
|||
$if-icon-flag-africa-sh |
|||
$if-icon-flag-africa-sl |
|||
$if-icon-flag-africa-sn |
|||
$if-icon-flag-africa-so |
|||
$if-icon-flag-africa-ss |
|||
$if-icon-flag-africa-st |
|||
$if-icon-flag-africa-sz |
|||
$if-icon-flag-africa-td |
|||
$if-icon-flag-africa-tg |
|||
$if-icon-flag-africa-tn |
|||
$if-icon-flag-africa-tz |
|||
$if-icon-flag-africa-ug |
|||
$if-icon-flag-africa-ye |
|||
$if-icon-flag-africa-yt |
|||
$if-icon-flag-africa-za |
|||
$if-icon-flag-africa-zm |
|||
$if-icon-flag-africa-zw |
Americas icons
Token | Mixin | Class | Example |
---|---|---|---|
$if-icon-flag-americas-ag |
|||
$if-icon-flag-americas-ai |
|||
$if-icon-flag-americas-ar |
|||
$if-icon-flag-americas-aw |
|||
$if-icon-flag-americas-bb |
|||
$if-icon-flag-americas-bm |
|||
$if-icon-flag-americas-bo |