EU System

Icons

Documentation • Demo

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"
}


/* 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"
}


/* 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>


<!-- 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>


<!-- 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/eu-base/eu-base';
@import '@ecl/generic-style-icon/generic-style-icon';

// Use generic mixin
@include exports('eu-style-icon') {
  @include ecl-icons();
}
  • URL: /components/raw/eu-style-icon/eu-style-icon.scss
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-icon/eu-style-icon.scss
  • Size: 215 Bytes
  • Handle: @ecl/eu-style-icon
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-style/eu-style-icon/eu-style-icon.twig