Icons
Icons using europa icons font.
You can change icon color and display by using color utilities and additional modifiers:
- ecl-u-color-primary: blue icon
- ecl-icon–rounded ecl-u-bg-secondary: adds a yellow circle background
<span class="ecl-icon {{modifier}}"></span>
/* Arrow down icon */
{
"modifier": "ecl-icon--arrow-down"
}
/* External link icon */
{
"modifier": "ecl-icon--external"
}
/* Arrow up icon */
{
"modifier": "ecl-icon--arrow-up"
}
/* Audio icon */
{
"modifier": "ecl-icon--audio"
}
/* Book icon */
{
"modifier": "ecl-icon--book"
}
/* Breadcrumb icon */
{
"modifier": "ecl-icon--breadcrumb"
}
/* Brochure icon */
{
"modifier": "ecl-icon--brochure"
}
/* Budget icon */
{
"modifier": "ecl-icon--budget"
}
/* Calendar icon */
{
"modifier": "ecl-icon--calendar"
}
/* Camera icon */
{
"modifier": "ecl-icon--camera"
}
/* Check icon */
{
"modifier": "ecl-icon--check"
}
/* Close icon */
{
"modifier": "ecl-icon--close"
}
/* Close (dark) icon */
{
"modifier": "ecl-icon--close-dark"
}
/* Copy icon */
{
"modifier": "ecl-icon--copy"
}
/* Data icon */
{
"modifier": "ecl-icon--data"
}
/* Digital icon */
{
"modifier": "ecl-icon--digital"
}
/* Down icon */
{
"modifier": "ecl-icon--down"
}
/* Download icon */
{
"modifier": "ecl-icon--download"
}
/* Edit icon */
{
"modifier": "ecl-icon--edit"
}
/* Energy icon */
{
"modifier": "ecl-icon--energy"
}
/* Error icon */
{
"modifier": "ecl-icon--error"
}
/* Euro icon */
{
"modifier": "ecl-icon--euro"
}
/* Facebook icon */
{
"modifier": "ecl-icon--facebook"
}
/* Faq icon */
{
"modifier": "ecl-icon--faq"
}
/* Feedback icon */
{
"modifier": "ecl-icon--feedback"
}
/* File icon */
{
"modifier": "ecl-icon--file"
}
/* Gear */
{
"modifier": "ecl-icon--gear"
}
/* Generic language icon */
{
"modifier": "ecl-icon--generic-lang"
}
/* Global icon */
{
"modifier": "ecl-icon--global"
}
/* Growth icon */
{
"modifier": "ecl-icon--growth"
}
/* Hamburger icon */
{
"modifier": "ecl-icon--hamburger"
}
/* Image icon */
{
"modifier": "ecl-icon--image"
}
/* In icon */
{
"modifier": "ecl-icon--in"
}
/* Info icon */
{
"modifier": "ecl-icon--info"
}
/* Infographic icon */
{
"modifier": "ecl-icon--infographic"
}
/* Instagram icon */
{
"modifier": "ecl-icon--instagram"
}
/* Language icon */
{
"modifier": "ecl-icon--language"
}
/* Left icon */
{
"modifier": "ecl-icon--left"
}
/* Linkedin icon */
{
"modifier": "ecl-icon--linkedin"
}
/* Live streaming icon */
{
"modifier": "ecl-icon--livestreaming"
}
/* Location icon */
{
"modifier": "ecl-icon--location"
}
/* Log in icon */
{
"modifier": "ecl-icon--log-in"
}
/* Logged in icon */
{
"modifier": "ecl-icon--logged-in"
}
/* Multiple files icon */
{
"modifier": "ecl-icon--multiple-files"
}
/* Organigram icon */
{
"modifier": "ecl-icon--organigram"
}
/* Package icon */
{
"modifier": "ecl-icon--package"
}
/* Presentation icon */
{
"modifier": "ecl-icon--presentation"
}
/* Regulation icon */
{
"modifier": "ecl-icon--regulation"
}
/* Right icon */
{
"modifier": "ecl-icon--right"
}
/* RSS icon */
{
"modifier": "ecl-icon--rss"
}
/* Search icon */
{
"modifier": "ecl-icon--search"
}
/* Share icon */
{
"modifier": "ecl-icon--share"
}
/* Slides icon */
{
"modifier": "ecl-icon--slides"
}
/* Spinner icon */
{
"modifier": "ecl-icon--spinner"
}
/* Spreadsheet icon */
{
"modifier": "ecl-icon--spreadsheet"
}
/* Success icon */
{
"modifier": "ecl-icon--success"
}
/* Tag-close icon */
{
"modifier": "ecl-icon--tag-close"
}
/* Twitter icon */
{
"modifier": "ecl-icon--twitter"
}
/* Up icon */
{
"modifier": "ecl-icon--up"
}
/* Video icon */
{
"modifier": "ecl-icon--video"
}
/* Warning icon */
{
"modifier": "ecl-icon--warning"
}
<!-- Arrow down icon -->
<span class="ecl-icon ecl-icon--arrow-down"></span>
<!-- External link icon -->
<span class="ecl-icon ecl-icon--external"></span>
<!-- Arrow up icon -->
<span class="ecl-icon ecl-icon--arrow-up"></span>
<!-- Audio icon -->
<span class="ecl-icon ecl-icon--audio"></span>
<!-- Book icon -->
<span class="ecl-icon ecl-icon--book"></span>
<!-- Breadcrumb icon -->
<span class="ecl-icon ecl-icon--breadcrumb"></span>
<!-- Brochure icon -->
<span class="ecl-icon ecl-icon--brochure"></span>
<!-- Budget icon -->
<span class="ecl-icon ecl-icon--budget"></span>
<!-- Calendar icon -->
<span class="ecl-icon ecl-icon--calendar"></span>
<!-- Camera icon -->
<span class="ecl-icon ecl-icon--camera"></span>
<!-- Check icon -->
<span class="ecl-icon ecl-icon--check"></span>
<!-- Close icon -->
<span class="ecl-icon ecl-icon--close"></span>
<!-- Close (dark) icon -->
<span class="ecl-icon ecl-icon--close-dark"></span>
<!-- Copy icon -->
<span class="ecl-icon ecl-icon--copy"></span>
<!-- Data icon -->
<span class="ecl-icon ecl-icon--data"></span>
<!-- Digital icon -->
<span class="ecl-icon ecl-icon--digital"></span>
<!-- Down icon -->
<span class="ecl-icon ecl-icon--down"></span>
<!-- Download icon -->
<span class="ecl-icon ecl-icon--download"></span>
<!-- Edit icon -->
<span class="ecl-icon ecl-icon--edit"></span>
<!-- Energy icon -->
<span class="ecl-icon ecl-icon--energy"></span>
<!-- Error icon -->
<span class="ecl-icon ecl-icon--error"></span>
<!-- Euro icon -->
<span class="ecl-icon ecl-icon--euro"></span>
<!-- Facebook icon -->
<span class="ecl-icon ecl-icon--facebook"></span>
<!-- Faq icon -->
<span class="ecl-icon ecl-icon--faq"></span>
<!-- Feedback icon -->
<span class="ecl-icon ecl-icon--feedback"></span>
<!-- File icon -->
<span class="ecl-icon ecl-icon--file"></span>
<!-- Gear -->
<span class="ecl-icon ecl-icon--gear"></span>
<!-- Generic language icon -->
<span class="ecl-icon ecl-icon--generic-lang"></span>
<!-- Global icon -->
<span class="ecl-icon ecl-icon--global"></span>
<!-- Growth icon -->
<span class="ecl-icon ecl-icon--growth"></span>
<!-- Hamburger icon -->
<span class="ecl-icon ecl-icon--hamburger"></span>
<!-- Image icon -->
<span class="ecl-icon ecl-icon--image"></span>
<!-- In icon -->
<span class="ecl-icon ecl-icon--in"></span>
<!-- Info icon -->
<span class="ecl-icon ecl-icon--info"></span>
<!-- Infographic icon -->
<span class="ecl-icon ecl-icon--infographic"></span>
<!-- Instagram icon -->
<span class="ecl-icon ecl-icon--instagram"></span>
<!-- Language icon -->
<span class="ecl-icon ecl-icon--language"></span>
<!-- Left icon -->
<span class="ecl-icon ecl-icon--left"></span>
<!-- Linkedin icon -->
<span class="ecl-icon ecl-icon--linkedin"></span>
<!-- Live streaming icon -->
<span class="ecl-icon ecl-icon--livestreaming"></span>
<!-- Location icon -->
<span class="ecl-icon ecl-icon--location"></span>
<!-- Log in icon -->
<span class="ecl-icon ecl-icon--log-in"></span>
<!-- Logged in icon -->
<span class="ecl-icon ecl-icon--logged-in"></span>
<!-- Multiple files icon -->
<span class="ecl-icon ecl-icon--multiple-files"></span>
<!-- Organigram icon -->
<span class="ecl-icon ecl-icon--organigram"></span>
<!-- Package icon -->
<span class="ecl-icon ecl-icon--package"></span>
<!-- Presentation icon -->
<span class="ecl-icon ecl-icon--presentation"></span>
<!-- Regulation icon -->
<span class="ecl-icon ecl-icon--regulation"></span>
<!-- Right icon -->
<span class="ecl-icon ecl-icon--right"></span>
<!-- RSS icon -->
<span class="ecl-icon ecl-icon--rss"></span>
<!-- Search icon -->
<span class="ecl-icon ecl-icon--search"></span>
<!-- Share icon -->
<span class="ecl-icon ecl-icon--share"></span>
<!-- Slides icon -->
<span class="ecl-icon ecl-icon--slides"></span>
<!-- Spinner icon -->
<span class="ecl-icon ecl-icon--spinner"></span>
<!-- Spreadsheet icon -->
<span class="ecl-icon ecl-icon--spreadsheet"></span>
<!-- Success icon -->
<span class="ecl-icon ecl-icon--success"></span>
<!-- Tag-close icon -->
<span class="ecl-icon ecl-icon--tag-close"></span>
<!-- Twitter icon -->
<span class="ecl-icon ecl-icon--twitter"></span>
<!-- Up icon -->
<span class="ecl-icon ecl-icon--up"></span>
<!-- Video icon -->
<span class="ecl-icon ecl-icon--video"></span>
<!-- Warning icon -->
<span class="ecl-icon ecl-icon--warning"></span>
-
Content:
/** * Icons */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-style-icon/generic-style-icon'; // Use generic mixin @include exports('ec-style-icon') { @include ecl-icons(); }
- URL: /components/raw/ec-style-icon/ec-style-icon.scss
- Filesystem Path: ../../src/systems/ec/ec-style/ec-style-icon/ec-style-icon.scss
- Size: 215 Bytes
- Handle: @ecl/ec-style-icon
- Preview:
- Filesystem Path: ../../src/systems/ec/ec-style/ec-style-icon/ec-style-icon.twig