Package detail

@ecl/resources-eu-icons

ec-europa361EUPL-1.24.1.2

Icons for EU system of ECL

ecl, europa-component-library, design-system

readme

ECL v4 - Europa Component Library

The Europa Component Library (ECL) is a library of components applicable to all European Commission and European Union websites. The library contains all available components which you can use to build your website.

All library elements are accompanied with

documentation: what the component is intended for and recommendations regarding its usage
demo: visual representation of the component
code: technologically agnostic HTML/CSS code and twig implementation

Requirements

ECL is currently using node 18.18.2 (LTS), we recommend using this version (nvm use) to ensure the compatibility with all the ECL dependencies or the ones defined by the ECL Builder.

Documentation

Read the technical documentation on GitHub.

Migrate from v3

Read the technical documentation on GitHub.

Quick start

The ECL is bundled in various presets in order to accomodate the different needs of everyone. Once you know which preset you want to use, you can:

download the latest release of the preset of your choice
install the preset with npm or yarn, e.g. npm install @ecl/preset-ec or yarn add @ecl/preset-ec

use the CDN, https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path/to/the/asset}. Here's an example:

<link
  rel="stylesheet"
  href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.0/ec/styles/optional/ecl-ec-default.css"
  integrity="sha256-I1xx/XJ0GqBhZ5NT7LgAqsNIZMpb0kYNPV447wkW49c= sha384-SuAYkmK76oosXjYvcYnRvWSlURs7b59sOxy3V44VpZwK5L/UBxFmigD4Z7EPxtCN sha512-k9ju0rK3ljqhYfGWtzzp7WPFoiHIEcmBIGNtXZnNGTuXhcST90rTFw2tsJcqANUCgs6zJU8bMpO6pdaoSdYCcw=="
  crossorigin="anonymous"
  media="screen"
/>

<link
  rel="stylesheet"
  href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.0/ec/styles/optional/ecl-reset.css"
  integrity="sha256-AGG15tiCmd80dSATMTyVPIcqCcFL0T1m3KPQ99mdMCE= sha384-I1F0Uxulq4ovSkbetl4ld5B9IlM416WNgcXRjvrql3iBt7NAMsaOTiZu5OOLD92H sha512-4cayikKTxUwl/tjQNA/4thcHcAUSFRzMpKW587ylIYnly1BMCEVAneYKy4OEQuTfPUGQZ9GyklwEwGuWjf9WGA=="
  crossorigin="anonymous"
  media="screen"
/>

<link
  rel="stylesheet"
  href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.0/ec/styles/ecl-ec.css"
  integrity="sha256-zm4xP+At5TbgjxXU5l2QZgepAS3a0uXP+JpEPY/mJu8= sha384-7W2ZqaogeK9UJyqiB4KMaaEM/T5WRCE48kT175N5qLMVd5qm3jzI8Fiy5wZB7QMO sha512-JeeCfFn51uKcZwZ4vfGQPMdO+781PFPZTRSMdLSPw2iU05JD8ie23i07te5Z1L0kspQgtWw+IXiwCNeixNKaMQ=="
  crossorigin="anonymous"
  media="screen"
/>

<link
  rel="stylesheet"
  href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.0/ec/styles/ecl-ec-utilities.css"
  integrity="sha256-o4Bx3Kkpy7NaMseVuhQG93qET+tw2p+1KV9GiQRjWjQ= sha384-MnJdAwxQg5TnYYyObKeljf5uT/H3PUntE2AvUAE9Zsz6/58/9se7mjy6bH+9xy5z sha512-mNfwDSZFdPk3bmF4QFS+bWD4l1s7Q2qScKXaazhadRljU8KsB1tZQXWKUj6/rrOL8AklKsq4qEiJuraSnzRFjg=="
  crossorigin="anonymous"
  media="screen"
/>

<link
  rel="stylesheet"
  href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.0/ec/styles/ecl-ec-print.css"
  integrity="sha256-GbkofhRrVgOdP7+k6MWfVX+ufcbKCYngKQ7oWyGx6dc= sha384-P4sVI7ZO3T+DLB5ZwqwLHZIsBBYJQpJ7YW3FN3Ff+AaZS7wXRNViN56q5LxqSQoq sha512-3MDNY7cRPPq+xt6h7je2slOrRCd5+xkBved3dYablW04lmeVhVUZcM3bWOwRk/Z7XOMhEdOSLpQz8dmuXrltBg=="
  crossorigin="anonymous"
  media="print"
/>

<link
  rel="stylesheet"
  href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.0/ec/styles/optional/ecl-ec-default-print.css"
  integrity="sha256-S0EDFbkY7xJneES81ti5vIsxBm0qaypIBXbleX8d2YA= sha384-L7bEIV3MMM1JdFqjJUhUVg8IUUwPO3t++5EWcJrdghFuUvjdLlRrjTwih2IsIE3Y
  sha512-QBwgOZD7apUsL2ZfNad0UXJfNsS/v2UpsMgbpNupn96vf11dhSmghfaLdAy+blZT/NyB8TRYn1aNIBtpfCGbDA=="
  crossorigin="anonymous"
  media="print"
/>

<script
  src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v4.1.0/ec/scripts/ecl-ec.js"
  integrity="sha256-qyiHTl2c+pvCLk7YE+KZbGiLtxtdZMG6CVdYMSA/p7g= sha384-o2SnrSqR2BoqXxJEkMfkc0qywm28xX76vMvee4UAXuMFE19fdViyvsoTsO0VVB8O sha512-rpGYL2zgfFJjoMVNq+w0c0Pq7V0VqqRgi/ls45/3Kw4h7/L2wwszLzG1KoJuWR5IMHl8pv6XbEuOSIfSS2iohw=="
  crossorigin="anonymous"
></script>

:warning: pikaday

ECL uses Pikaday and this library is not bundled anymore by ECL. Therefore pikaday needs to be loaded or bundled by the application or website using ECL, depending on the needs, it is only required when a datepicker instance is present in a webpage. Additionally, when customising the date format used by the datepicker, in order to get a consistent output, moment.js is also needed. These scripts can be loaded from a CDN or fetched from the respective npm packages or websites for then hosting them locally. The order of the scripts should be:

moment.js (https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js) (https://momentjs.com/)
pikaday (https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.2/pikaday.min.js) (https://pikaday.com/)
ecl.js

Need help?

Please contact COMM Europa Management for support on using this resource for a European Commission website.

Previous major versions

v2.39.0: sources - release - website
v1.15.0: sources - release - website
v0.24.3: sources - release - website

changelog

Changelog

4.1.2

:bug: Bug Fix

#3352 fix(menu): fix resize on mobile - FRONT-4382 (@emeryro)

Committers: 1

Romain Emery (@emeryro)

4.1.1

:warning: Markup Changes

#3331 fix(modal): remove aria-hidden on the icon - FRONT-4356 (@emeryro)

:warning: Data Changes

#3323 feat(forms): add icon title for error message - FRONT-4330 (@emeryro)

:bug: Bug Fix

#3318 fix(select): Removing buggy animation of the arrow in the default select - FRONT-4348 (@planctus)
#3331 fix(modal): remove aria-hidden on the icon - FRONT-4356 (@emeryro)
#3330 fix(select): Fixing arrow size - FRONT-4351 (@planctus)
#3328 fix(navigation-list): Setting max-width for the image in the iillustration variant - FRONT-4355 (@planctus)

:nail_care: Enhancement

#3322 feat(multi-select): fix arrow down navigation - FRONT-4335 (@emeryro)
#3329 feat(menu): Adding support for extra attributes for items and sub-items - FRONT-4357 (@planctus)
#3327 feat(mega-menu): Adding support for extra attributes for every link - FRONT-4353 (@planctus)
#3325 feat(mega-menu): External icon only for standalone items - FRONT-4352 (@planctus)
#3323 feat(forms): add icon title for error message - FRONT-4330 (@emeryro)
#3320 feat(multi-select): improve keyboard flow - FRONT-4337 (@emeryro)
#3319 feat(select): add aria-label when using optgroup - FRONT-4334 (@emeryro)

Committers: 2

Romain Emery (@emeryro)
@planctus

4.1.0

:rocket: New Feature

#3297 feat(mega-menu): Adding component - FRONT-4279 (@planctus)

:warning: Markup Changes

#3247 feat(table): add accessibility scope - FRONT-4259 (@emeryro)
#3246 feat(tag-set): use html list markup - FRONT-4262 (@emeryro)

:warning: Data Changes

#3253 feat(table): add optional caption - FRONT-4274 (@emeryro)
#3304 feat(modal): add screen reader text to icon - FRONT-4320 (@emeryro)

:bug: Bug Fix

#3313 fix(banner): Fixing height for the plain background variant (@planctus)
#3310 fix(page-header): Fix closure tag for the description wrapper - FRONT-4347 (@planctus)
#3303 fix(file-upload): add focus styles - FRONT-4317 (@emeryro)
#3306 fix(menu): Fixing position in the site-header and inner styles for RTL support - FRONT-4327 (@planctus)
#3307 fix(checkbox): fix website demo - FRONT-4328 (@emeryro)
#3276 fix(menu): Bring the user back to the open/close button when reaching the last item in mobile - FRONT-4288 (@planctus)

:nail_care: Enhancement

#3118 feat(icon): use css cutom properties - FRONT-4152 (@emeryro)
#3253 feat(table): add optional caption - FRONT-4274 (@emeryro)
#3302 feat(button): update EU button styles - FRONT-4323 (@emeryro)
#3304 feat(modal): add screen reader text to icon - FRONT-4320 (@emeryro)
#3247 feat(table): add accessibility scope - FRONT-4259 (@emeryro)
#3246 feat(tag-set): use html list markup - FRONT-4262 (@emeryro)
#3291 feat(button): remove tertiary button background and update components using it - FRONT-4295 (@emeryro)

:house: Internal

#3308 chore: Storybook 8 - FRONT-4292 (@planctus)

Committers: 2

Romain Emery (@emeryro)
@planctus

4.0.2

:bug: Bug Fix

#3294 fix(featured-item): fix picture spacing - FRONT-4310 (@emeryro)
#3295 fix(icon): update x/twitter icon size (@emeryro)
#3288 fix(blockquote): Fixing styles for the cite element - FRONT-4306 (@planctus)
#3290 fix(blockquote): fix blockquote in wysiwyg - FRONT-4307 (@emeryro)

:nail_care: Enhancement

#3293 feat(navigation-list): remove background when there is no border - FRONT-4309 (@emeryro)
#3292 feat(navigation-list): reduce spacing - FRONT-4308 (@emeryro)
#3252 feat(blockquote): remove italic - FRONT-4273 (@emeryro)

Committers: 2

Romain Emery (@emeryro)
@planctus

4.0.1

:rocket: New Feature

#3278 feat(menu): Removing light variant in EC - FRONT-4297 (@planctus)
#3209 feat(icon): Replacing twitter with X icons - FRONT-4061 (@planctus)

:bug: Bug Fix

#3279 fix(list-illustration): Fixing center alignment - FRONT-4298 (@planctus)
#3281 feat(page-header): Removing padding bottom in EU, fixing no margin - FRONT-4301 (@planctus)
#3275 fix(carousel): Fixing the resetBannerHeight method, avoiding any loop - FRONT-4293 (@planctus)
#3273 fix(notification): Fixing position of the background element for the warning icon - FRONT-4294 (@planctus)
#3266 fix(css): Not including the light variant for the menu in EU - FRONT-4287 (@planctus)
#3265 fix(language-list): Fixing color on :visited for the current item - FRONT-4290 (@planctus)

:nail_care: Enhancement

#3285 feat(navigation-list): Setting 100% height for the items - FRONT-4305 (@planctus)
#3282 feat(featured-item): Revamp of the default variant in EC - FRONT-4300 (@planctus)
#3280 feat(links): Removing color switch for visited links - FRONT-4302 (@planctus)
#3283 feat(images): Removing borders, keeping them only in content-item - FRONT-4303 (@planctus)
#3284 feat(list): Revamp of unordered list - FRONT-4304 (@planctus)

:memo: Documentation

#3267 chore(website): Adding link to v3.13.0 - FRONT-4289 (@planctus)

:house: Internal

#3286 chore(deps): green and orange updates 14-03-24 (@planctus)
#3264 chore(deps): Updates 04-03-24 (@planctus)

Committers: 1

@planctus

4.0.0

:bug: Bug Fix

#3257 fix(menu): Preventing page scrolling when opened in mobile, fixing position in mobile - FRONT-4283 (@planctus)
#3256 feat(multi-select): fix disabled cursor - FRONT-4278 (@emeryro)

:nail_care: Enhancement

#3260 feat(list): Changing dash in unordered list - FRONT-4285 (@planctus)
#3259 feat(page-header): Adding wrapper to better handling the spacing - FRONT-4284 (@planctus)
#3258 feat(featured-item): Setting white background in EC and EU - FRONT-4280 (@planctus)

:memo: Documentation

#3262 chore: Usage page updates for the site-wide components (@planctus)

Committers: 2

Romain Emery (@emeryro)
@planctus

4.0.0-beta-3

:rocket: New Feature

#3249 feat(icons): Adding camera icon - FRONT-4272 (@planctus)

:bug: Bug Fix

#3231 feat(tag): fix accessibility text - FRONT-4261 (@emeryro)

:nail_care: Enhancement

#3161 feat(popover): Four directions, scroll and resize detection - FRONT-4159 (@planctus)
#3254 feat(icons): Updating three icons in EU - FRONT-4275 (@planctus)
#3242 feat(notification): add screen reader label - FRONT-4257 (@emeryro)
#3245 feat(notification): Updating styles - FRONT-4270 (@planctus)
#3237 feat(news-ticker): add text for external icon - FRONT-4258 (@emeryro)

:house: Internal

#3248 chore(deps): Updates 20-02-24 (@planctus)

Committers: 2

Romain Emery (@emeryro)
@planctus

4.0.0-beta-2

:rocket: New Feature

#3210 feat(menu): dark variant and mobile display update - FRONT-4236 (@emeryro)
#3221 feat(icons): Adding clock icons, removing deprecated icons - FRONT-4247 (@planctus)

:bug: Bug Fix

#3243 fix(clickable-images): Limiting the number of iterations, adding card expection - FRONT-4267 (@planctus)
#3234 fix(icons): using the newly introduced play-outline icon - FRONT-4255 (@planctus)
#3238 fix(timeline): fixing styles for border and toggle aligment - FRONT-4264 (@planctus)
#3222 fix(page-titles): Fixing page titles in the website - FRONT-4246 (@planctus)
#3225 fix(apis): fixing code highlight and paths to the apis for nested components - FRONT-4248 (@planctus)
#3219 fix(select): fix multi select width - FRONT-4244 (@emeryro)
#3220 chore(apis): Using relative path to reach the html page to be included (@planctus)

:nail_care: Enhancement

#3235 feat(icons): Replacing some icons in EC - FRONT-4256 (@planctus)
#3232 feat(menu): add dynamic label - FRONT-4251 (@emeryro)
#3241 feat(icons): Renaming basket, gear and back icons - FRONT-4266 (@planctus)
#3240 feat(menu): use dark as default - FRONT-4236 (@emeryro)
#3226 feat(social-media-follow): add monochrome icons - FRONT-4250 (@emeryro)
#3229 fix(banner): remove extra margin - FRONT-4524 (@emeryro)
#3227 fix(notification): Colouring the exclamation mark in the warning icon in EC - FRONT-4249 (@planctus)

:memo: Documentation

#3224 docs: update various documentation for ECL 4 - FRONT-4234 (@emeryro)

:house: Internal

#3236 chore(deps): Updates 14-02-24 (@planctus)
#3228 feat(sass): cleanup unused variables - FRONT-4523 (@emeryro)
#3223 chore(deps): Storybook 7.6.13 (@planctus)

Committers: 2

Romain Emery (@emeryro)
@planctus

4.0.0-beta-1

First release of ECL v4, please refer to the migration document if you are about to upgrade ECL in your website or application.