Icons

Documentation • Demo

Ready

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

View
Context
HTML
Code
Info


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


        
            /* Generic language icon */
{
  "modifier": "ecl-icon--generic-lang"
}


        
            /* Global icon */
{
  "modifier": "ecl-icon--global"
}


        
            /* G+ icon */
{
  "modifier": "ecl-icon--googleplus"
}


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


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


        
            <!-- Generic language icon -->
<span class="ecl-icon ecl-icon--generic-lang"></span>


        
            <!-- Global icon -->
<span class="ecl-icon ecl-icon--global"></span>


        
            <!-- G+ icon -->
<span class="ecl-icon ecl-icon--googleplus"></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>


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

File:

Content:


                                /**
 * Icons
 */

@import './variables';
@import './mixins';

@font-face {
  font-family: 'EuropaIcons';
  src: url('../fonts/europa-icons/europa-icons.eot');
  src: url('../fonts/europa-icons/europa-icons.eot?#iefix')
      format('embedded-opentype'),
    url('../fonts/europa-icons/europa-icons.woff') format('woff'),
    url('../fonts/europa-icons/europa-icons.ttf') format('truetype'),
    url('../fonts/europa-icons/europa-icons.svg#europa-icons') format('svg');
}

%ecl-icon {
  &::before {
    display: inline-block;
    font-family: 'EuropaIcons'; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
    // Better Font Rendering
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    margin-right: 4px;
    speak: none;
    text-decoration: none;
    text-transform: none;
  }
}

// Should be used only with @extend.
%ecl-icon--after {
  display: inline-block;
  font-family: 'EuropaIcons'; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
  // Better Font Rendering
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  margin-left: 4px;
  speak: none;
  text-decoration: none;
  text-transform: none;
}

// DEPRECATED: you should use @include ecl-icon('icon') when you want to include an icon
@each $modifier, $char in $ecl-icons {
  %ecl-icon--#{$modifier} {
    /* stylelint-disable-next-line */
    &::before {
      @include ecl-icon($modifier); /* stylelint-disable-line scss/percent-placeholder-pattern */
    }
  }
}

/**
 * Icon classes
 * @define icon
 */

.ecl-icon {
  @extend %ecl-icon;
}

.ecl-icon--after {
  @extend %ecl-icon--after;
}

// Icon component and modifiers.
/* stylelint-disable plugin/selector-bem-pattern */
@each $modifier, $char in $ecl-icons {
  .ecl-icon--#{$modifier} {
    &::before {
      @include ecl-icon($modifier);
    }
  }
}

.ecl-icon--rounded {
  border-radius: 50%;
  display: inline-block;
  font-size: map-get($ecl-font-size, 'xs');
  height: map-get($ecl-spacing, 'l');
  line-height: map-get($ecl-spacing, 'l');
  text-align: center;
  width: map-get($ecl-spacing, 'l');

  &::before {
    line-height: inherit;
    margin-right: 0;
  }
}
/* stylelint-enable */

URL: /components/raw/ecl-icons/_icons.scss
Filesystem Path: framework/content/ecl-icons/_icons.scss
Size: 2.4 KB

Content:


                                @mixin ecl-icon($modifier, $char: map-get($ecl-icons, $modifier)) {
  content: #{"'"}#{$char}#{"'"};
}

URL: /components/raw/ecl-icons/_mixins.scss
Filesystem Path: framework/content/ecl-icons/_mixins.scss
Size: 103 Bytes

Content:


                                // ECL icons

$ecl-icons: (
    arrow-down: \e822,
    arrow-up: \e821,
    audio: \e801,
    book: \0022,
    breadcrumb: \e828,
    brochure: \e802,
    budget: \e81a,
    calendar: \e81d,
    camera: \e800,
    check: \e816,
    close-dark: \e82d,
    close: \e82c,
    copy: \29,
    data: \24,
    digital: \e80b,
    down: \e81f,
    download: \e806,
    edit: \e807,
    energy: \e818,
    error: \e82f,
    euro: \e803,
    external: \e825,
    facebook: \e809,
    faq: \21,
    feedback: \e82e,
    file: \26,
    generic-lang: \e81e,
    global: \e829,
    googleplus: \e80c,
    growth: \e82a,
    image: \e80d,
    in: \e806,
    info: \e815,
    infographic: \e80f,
    language: \e824,
    left: \e826,
    linkedin: \e810,
    livestreaming: \e81c,
    location: \e81b,
    multiple-files: \e820,
    organigram: \e811,
    package: \e812,
    presentation: \e80e,
    regulation: \e82b,
    right: \e828,
    rss: \e813,
    search: \e823,
    share: \e808,
    slides: \e80e,
    spinner: \e805,
    spreadsheet: \2d,
    success: \e814,
    tag-close: \e82c,
    twitter: \e817,
    up: \e827,
    video: \e800,
    warning: \e804
  )
  !default;

URL: /components/raw/ecl-icons/_variables.scss
Filesystem Path: framework/content/ecl-icons/_variables.scss
Size: 1.2 KB

Handle: @ec-europa/ecl-icons
Preview:
- With layout
- Component only
Filesystem Path: framework/content/ecl-icons/ecl-icons.twig