Icônes

Source Code HTML / SASS

Vous trouverez ici les démos et le code source statiques du composant.

On expose les différentes déclinaisons du composant au format HTML et SASS.

Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.react storybook

Classic Icons

// Page générée par la tâche Gulp generatePugIcons

Liste des icons

  • adjust.svg
  • alert.svg
  • align-center.svg
  • align-justify.svg
  • align-left.svg
  • align-right.svg
  • all.svg
  • apple.svg
  • arrow-collapse-down.svg
  • arrow-collapse-left.svg
  • arrow-collapse-right.svg
  • arrow-collapse-up.svg
  • arrow-down.svg
  • arrow-left.svg
  • arrow-right.svg
  • arrow-rounded-bottom.svg
  • arrow-rounded-left.svg
  • arrow-rounded-right.svg
  • arrow-rounded-top.svg
  • arrow-up.svg
  • arrow-xs-down.svg
  • arrow-xs-left.svg
  • arrow-xs-right.svg
  • arrow-xs-up.svg
  • arrowthin-down.svg
  • arrowthin-left.svg
  • arrowthin-right.svg
  • arrowthin-up.svg
  • asterisk.svg
  • auto.svg
  • axa-switch.svg
  • baby-formula.svg
  • backward.svg
  • ban-circle.svg
  • bank.svg
  • barcode.svg
  • bed.svg
  • bell.svg
  • bishop.svg
  • bitcoin.svg
  • blackboard.svg
  • bold.svg
  • book.svg
  • bookmark.svg
  • briefcase-add.svg
  • briefcase-cup.svg
  • briefcase-ok.svg
  • briefcase-wait.svg
  • briefcase.svg
  • bullhorn.svg
  • calendar.svg
  • camera.svg
  • car-compact.svg
  • car-secure.svg
  • cd.svg
  • certificate.svg
  • chair.svg
  • check.svg
  • chevron-down.svg
  • chevron-left.svg
  • chevron-right.svg
  • chevron-up.svg
  • child.svg
  • circle-arrow-down.svg
  • circle-arrow-left.svg
  • circle-arrow-right.svg
  • circle-arrow-up.svg
  • close.svg
  • cloud-download.svg
  • cloud-upload.svg
  • cloud.svg
  • coffre.svg
  • cog.svg
  • collapse-down.svg
  • collapse-up.svg
  • comment.svg
  • compressed.svg
  • console.svg
  • copy.svg
  • copyright-mark.svg
  • credit-card.svg
  • cutlery.svg
  • dashboard.svg
  • download-alt.svg
  • download.svg
  • duplicate.svg
  • earphone.svg
  • edit.svg
  • education.svg
  • eject.svg
  • envelope.svg
  • equalizer.svg
  • erase.svg
  • euro-symbol.svg
  • exclamation-sign.svg
  • expand.svg
  • export.svg
  • eye-close.svg
  • eye-open.svg
  • facebook.svg
  • facetime-video.svg
  • fast-backward.svg
  • fast-forward.svg
  • file-doc.svg
  • file-pdf.svg
  • file-xls.svg
  • file.svg
  • film.svg
  • filter.svg
  • fire.svg
  • flag.svg
  • flash.svg
  • floppy-disk.svg
  • floppy-open.svg
  • floppy-remove.svg
  • floppy-save.svg
  • floppy-saved.svg
  • folder-close.svg
  • folder-open.svg
  • font.svg
  • forward.svg
  • france.svg
  • fullscreen.svg
  • gbp.svg
  • gift.svg
  • glass.svg
  • globe.svg
  • grain.svg
  • hand-down.svg
  • hand-left.svg
  • hand-right.svg
  • hand-up.svg
  • hd-video.svg
  • hdd.svg
  • header.svg
  • headphone.svg
  • heart-empty.svg
  • heart.svg
  • home.svg
  • hourglass.svg
  • import.svg
  • imprimer.svg
  • inbox.svg
  • indent-left.svg
  • indent-right.svg
  • info-sign.svg
  • instagram.svg
  • italic.svg
  • king.svg
  • knight.svg
  • lamp.svg
  • leaf.svg
  • level-up.svg
  • link.svg
  • linkedin-logo.svg
  • list-alt.svg
  • list.svg
  • lock.svg
  • log-in.svg
  • log-out.svg
  • lolly-tasted.svg
  • lolly.svg
  • magnet.svg
  • map-marker.svg
  • menu-down.svg
  • menu-hamburger.svg
  • menu-left.svg
  • menu-right.svg
  • menu-up.svg
  • minus-sign.svg
  • minus.svg
  • modal-window.svg
  • move.svg
  • music.svg
  • new-window.svg
  • object-align-bottom.svg
  • object-align-horizontal.svg
  • object-align-left.svg
  • object-align-right.svg
  • object-align-top.svg
  • object-align-vertical.svg
  • off.svg
  • oil.svg
  • ok-circle.svg
  • ok-sign.svg
  • ok.svg
  • open-file.svg
  • open.svg
  • option-horizontal.svg
  • option-vertical.svg
  • paperclip.svg
  • paste.svg
  • pause.svg
  • pawn.svg
  • pdf.svg
  • pencil.svg
  • phone-alt.svg
  • phone.svg
  • picture.svg
  • plane.svg
  • play-circle.svg
  • play.svg
  • plus-sign.svg
  • plus.svg
  • print.svg
  • pushpin.svg
  • pushpin2.svg
  • pushpin3.svg
  • pushpin4.svg
  • pushpin5.svg
  • pushpin6.svg
  • pushpin7.svg
  • pushpin8.svg
  • qrcode.svg
  • queen.svg
  • question-sign.svg
  • random.svg
  • record.svg
  • refresh.svg
  • registration-mark.svg
  • remove-circle.svg
  • remove-sign.svg
  • remove.svg
  • repeat.svg
  • reset.svg
  • resize-full.svg
  • resize-horizontal.svg
  • resize-small.svg
  • resize-vertical.svg
  • retweet.svg
  • road.svg
  • ruble.svg
  • save-alt.svg
  • save-file.svg
  • saved.svg
  • scale.svg
  • scissors.svg
  • screenshot.svg
  • sd-video.svg
  • search.svg
  • seat-belt.svg
  • send.svg
  • share-alt.svg
  • share.svg
  • shopping-cart.svg
  • signal.svg
  • sorting-asc.svg
  • sorting-desc.svg
  • sorting.svg
  • sound-5-1.svg
  • sound-6-1.svg
  • sound-7-1.svg
  • sound-dolby.svg
  • sound-stereo.svg
  • star-empty.svg
  • star.svg
  • stats.svg
  • step-backward.svg
  • step-forward.svg
  • stop.svg
  • subscript.svg
  • subtitles.svg
  • sunglasses.svg
  • superscript.svg
  • tag.svg
  • tags.svg
  • task.svg
  • text-background.svg
  • text-color.svg
  • text-height.svg
  • text-size.svg
  • text-width.svg
  • th-large.svg
  • th-list.svg
  • th.svg
  • thumbs-down.svg
  • thumbs-up.svg
  • time.svg
  • tint.svg
  • tow-truck.svg
  • towed-car.svg
  • tower.svg
  • transfer.svg
  • trash.svg
  • tree-conifer.svg
  • tree-deciduous.svg
  • twitter-logo-silhouette.svg
  • uncheck.svg
  • unlock.svg
  • upload.svg
  • usd.svg
  • user.svg
  • volume-down.svg
  • volume-off.svg
  • volume-up.svg
  • warning-sign.svg
  • wrench.svg
  • xls.svg
  • yen.svg
  • youtube-symbol.svg
  • zoom-in.svg
  • zoom-out.svg
Copied
<h3>// Page générée par la tâche Gulp generatePugIcons</h3>
<h2 class="af-title">Liste des icons</h2>
<ul class="icons-list">
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/adjust.svg" /><span class="icons-list__item-name">adjust.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/alert.svg" /><span class="icons-list__item-name">alert.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/align-center.svg" /><span class="icons-list__item-name">align-center.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/align-justify.svg" /><span class="icons-list__item-name">align-justify.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/align-left.svg" /><span class="icons-list__item-name">align-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/align-right.svg" /><span class="icons-list__item-name">align-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/all.svg" /><span class="icons-list__item-name">all.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/apple.svg" /><span class="icons-list__item-name">apple.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-collapse-down.svg" /><span class="icons-list__item-name">arrow-collapse-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-collapse-left.svg" /><span class="icons-list__item-name">arrow-collapse-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-collapse-right.svg" /><span class="icons-list__item-name">arrow-collapse-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-collapse-up.svg" /><span class="icons-list__item-name">arrow-collapse-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-down.svg" /><span class="icons-list__item-name">arrow-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-left.svg" /><span class="icons-list__item-name">arrow-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-right.svg" /><span class="icons-list__item-name">arrow-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-rounded-bottom.svg" /><span class="icons-list__item-name">arrow-rounded-bottom.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-rounded-left.svg" /><span class="icons-list__item-name">arrow-rounded-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-rounded-right.svg" /><span class="icons-list__item-name">arrow-rounded-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-rounded-top.svg" /><span class="icons-list__item-name">arrow-rounded-top.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-up.svg" /><span class="icons-list__item-name">arrow-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-xs-down.svg" /><span class="icons-list__item-name">arrow-xs-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-xs-left.svg" /><span class="icons-list__item-name">arrow-xs-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-xs-right.svg" /><span class="icons-list__item-name">arrow-xs-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrow-xs-up.svg" /><span class="icons-list__item-name">arrow-xs-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrowthin-down.svg" /><span class="icons-list__item-name">arrowthin-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrowthin-left.svg" /><span class="icons-list__item-name">arrowthin-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrowthin-right.svg" /><span class="icons-list__item-name">arrowthin-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/arrowthin-up.svg" /><span class="icons-list__item-name">arrowthin-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/asterisk.svg" /><span class="icons-list__item-name">asterisk.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/auto.svg" /><span class="icons-list__item-name">auto.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/axa-switch.svg" /><span class="icons-list__item-name">axa-switch.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/baby-formula.svg" /><span class="icons-list__item-name">baby-formula.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/backward.svg" /><span class="icons-list__item-name">backward.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/ban-circle.svg" /><span class="icons-list__item-name">ban-circle.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bank.svg" /><span class="icons-list__item-name">bank.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/barcode.svg" /><span class="icons-list__item-name">barcode.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bed.svg" /><span class="icons-list__item-name">bed.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bell.svg" /><span class="icons-list__item-name">bell.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bishop.svg" /><span class="icons-list__item-name">bishop.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bitcoin.svg" /><span class="icons-list__item-name">bitcoin.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/blackboard.svg" /><span class="icons-list__item-name">blackboard.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bold.svg" /><span class="icons-list__item-name">bold.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/book.svg" /><span class="icons-list__item-name">book.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bookmark.svg" /><span class="icons-list__item-name">bookmark.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/briefcase-add.svg" /><span class="icons-list__item-name">briefcase-add.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/briefcase-cup.svg" /><span class="icons-list__item-name">briefcase-cup.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/briefcase-ok.svg" /><span class="icons-list__item-name">briefcase-ok.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/briefcase-wait.svg" /><span class="icons-list__item-name">briefcase-wait.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/briefcase.svg" /><span class="icons-list__item-name">briefcase.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/bullhorn.svg" /><span class="icons-list__item-name">bullhorn.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/calendar.svg" /><span class="icons-list__item-name">calendar.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/camera.svg" /><span class="icons-list__item-name">camera.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/car-compact.svg" /><span class="icons-list__item-name">car-compact.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/car-secure.svg" /><span class="icons-list__item-name">car-secure.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/cd.svg" /><span class="icons-list__item-name">cd.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/certificate.svg" /><span class="icons-list__item-name">certificate.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/chair.svg" /><span class="icons-list__item-name">chair.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/check.svg" /><span class="icons-list__item-name">check.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/chevron-down.svg" /><span class="icons-list__item-name">chevron-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/chevron-left.svg" /><span class="icons-list__item-name">chevron-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/chevron-right.svg" /><span class="icons-list__item-name">chevron-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/chevron-up.svg" /><span class="icons-list__item-name">chevron-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/child.svg" /><span class="icons-list__item-name">child.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/circle-arrow-down.svg" /><span class="icons-list__item-name">circle-arrow-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/circle-arrow-left.svg" /><span class="icons-list__item-name">circle-arrow-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/circle-arrow-right.svg" /><span class="icons-list__item-name">circle-arrow-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/circle-arrow-up.svg" /><span class="icons-list__item-name">circle-arrow-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/close.svg" /><span class="icons-list__item-name">close.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/cloud-download.svg" /><span class="icons-list__item-name">cloud-download.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/cloud-upload.svg" /><span class="icons-list__item-name">cloud-upload.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/cloud.svg" /><span class="icons-list__item-name">cloud.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/coffre.svg" /><span class="icons-list__item-name">coffre.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/cog.svg" /><span class="icons-list__item-name">cog.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/collapse-down.svg" /><span class="icons-list__item-name">collapse-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/collapse-up.svg" /><span class="icons-list__item-name">collapse-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/comment.svg" /><span class="icons-list__item-name">comment.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/compressed.svg" /><span class="icons-list__item-name">compressed.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/console.svg" /><span class="icons-list__item-name">console.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/copy.svg" /><span class="icons-list__item-name">copy.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/copyright-mark.svg" /><span class="icons-list__item-name">copyright-mark.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/credit-card.svg" /><span class="icons-list__item-name">credit-card.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/cutlery.svg" /><span class="icons-list__item-name">cutlery.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/dashboard.svg" /><span class="icons-list__item-name">dashboard.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/download-alt.svg" /><span class="icons-list__item-name">download-alt.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/download.svg" /><span class="icons-list__item-name">download.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/duplicate.svg" /><span class="icons-list__item-name">duplicate.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/earphone.svg" /><span class="icons-list__item-name">earphone.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/edit.svg" /><span class="icons-list__item-name">edit.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/education.svg" /><span class="icons-list__item-name">education.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/eject.svg" /><span class="icons-list__item-name">eject.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/envelope.svg" /><span class="icons-list__item-name">envelope.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/equalizer.svg" /><span class="icons-list__item-name">equalizer.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/erase.svg" /><span class="icons-list__item-name">erase.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/euro-symbol.svg" /><span class="icons-list__item-name">euro-symbol.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/exclamation-sign.svg" /><span class="icons-list__item-name">exclamation-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/expand.svg" /><span class="icons-list__item-name">expand.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/export.svg" /><span class="icons-list__item-name">export.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/eye-close.svg" /><span class="icons-list__item-name">eye-close.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/eye-open.svg" /><span class="icons-list__item-name">eye-open.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/facebook.svg" /><span class="icons-list__item-name">facebook.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/facetime-video.svg" /><span class="icons-list__item-name">facetime-video.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/fast-backward.svg" /><span class="icons-list__item-name">fast-backward.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/fast-forward.svg" /><span class="icons-list__item-name">fast-forward.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/file-doc.svg" /><span class="icons-list__item-name">file-doc.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/file-pdf.svg" /><span class="icons-list__item-name">file-pdf.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/file-xls.svg" /><span class="icons-list__item-name">file-xls.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/file.svg" /><span class="icons-list__item-name">file.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/film.svg" /><span class="icons-list__item-name">film.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/filter.svg" /><span class="icons-list__item-name">filter.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/fire.svg" /><span class="icons-list__item-name">fire.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/flag.svg" /><span class="icons-list__item-name">flag.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/flash.svg" /><span class="icons-list__item-name">flash.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/floppy-disk.svg" /><span class="icons-list__item-name">floppy-disk.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/floppy-open.svg" /><span class="icons-list__item-name">floppy-open.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/floppy-remove.svg" /><span class="icons-list__item-name">floppy-remove.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/floppy-save.svg" /><span class="icons-list__item-name">floppy-save.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/floppy-saved.svg" /><span class="icons-list__item-name">floppy-saved.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/folder-close.svg" /><span class="icons-list__item-name">folder-close.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/folder-open.svg" /><span class="icons-list__item-name">folder-open.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/font.svg" /><span class="icons-list__item-name">font.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/forward.svg" /><span class="icons-list__item-name">forward.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/france.svg" /><span class="icons-list__item-name">france.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/fullscreen.svg" /><span class="icons-list__item-name">fullscreen.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/gbp.svg" /><span class="icons-list__item-name">gbp.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/gift.svg" /><span class="icons-list__item-name">gift.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/glass.svg" /><span class="icons-list__item-name">glass.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/globe.svg" /><span class="icons-list__item-name">globe.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/grain.svg" /><span class="icons-list__item-name">grain.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/hand-down.svg" /><span class="icons-list__item-name">hand-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/hand-left.svg" /><span class="icons-list__item-name">hand-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/hand-right.svg" /><span class="icons-list__item-name">hand-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/hand-up.svg" /><span class="icons-list__item-name">hand-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/hd-video.svg" /><span class="icons-list__item-name">hd-video.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/hdd.svg" /><span class="icons-list__item-name">hdd.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/header.svg" /><span class="icons-list__item-name">header.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/headphone.svg" /><span class="icons-list__item-name">headphone.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/heart-empty.svg" /><span class="icons-list__item-name">heart-empty.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/heart.svg" /><span class="icons-list__item-name">heart.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/home.svg" /><span class="icons-list__item-name">home.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/hourglass.svg" /><span class="icons-list__item-name">hourglass.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/import.svg" /><span class="icons-list__item-name">import.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/imprimer.svg" /><span class="icons-list__item-name">imprimer.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/inbox.svg" /><span class="icons-list__item-name">inbox.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/indent-left.svg" /><span class="icons-list__item-name">indent-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/indent-right.svg" /><span class="icons-list__item-name">indent-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/info-sign.svg" /><span class="icons-list__item-name">info-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/instagram.svg" /><span class="icons-list__item-name">instagram.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/italic.svg" /><span class="icons-list__item-name">italic.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/king.svg" /><span class="icons-list__item-name">king.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/knight.svg" /><span class="icons-list__item-name">knight.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/lamp.svg" /><span class="icons-list__item-name">lamp.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/leaf.svg" /><span class="icons-list__item-name">leaf.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/level-up.svg" /><span class="icons-list__item-name">level-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/link.svg" /><span class="icons-list__item-name">link.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/linkedin-logo.svg" /><span class="icons-list__item-name">linkedin-logo.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/list-alt.svg" /><span class="icons-list__item-name">list-alt.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/list.svg" /><span class="icons-list__item-name">list.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/lock.svg" /><span class="icons-list__item-name">lock.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/log-in.svg" /><span class="icons-list__item-name">log-in.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/log-out.svg" /><span class="icons-list__item-name">log-out.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/lolly-tasted.svg" /><span class="icons-list__item-name">lolly-tasted.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/lolly.svg" /><span class="icons-list__item-name">lolly.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/magnet.svg" /><span class="icons-list__item-name">magnet.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/map-marker.svg" /><span class="icons-list__item-name">map-marker.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/menu-down.svg" /><span class="icons-list__item-name">menu-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/menu-hamburger.svg" /><span class="icons-list__item-name">menu-hamburger.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/menu-left.svg" /><span class="icons-list__item-name">menu-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/menu-right.svg" /><span class="icons-list__item-name">menu-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/menu-up.svg" /><span class="icons-list__item-name">menu-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/minus-sign.svg" /><span class="icons-list__item-name">minus-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/minus.svg" /><span class="icons-list__item-name">minus.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/modal-window.svg" /><span class="icons-list__item-name">modal-window.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/move.svg" /><span class="icons-list__item-name">move.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/music.svg" /><span class="icons-list__item-name">music.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/new-window.svg" /><span class="icons-list__item-name">new-window.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/object-align-bottom.svg" /><span class="icons-list__item-name">object-align-bottom.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/object-align-horizontal.svg" /><span class="icons-list__item-name">object-align-horizontal.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/object-align-left.svg" /><span class="icons-list__item-name">object-align-left.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/object-align-right.svg" /><span class="icons-list__item-name">object-align-right.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/object-align-top.svg" /><span class="icons-list__item-name">object-align-top.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/object-align-vertical.svg" /><span class="icons-list__item-name">object-align-vertical.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/off.svg" /><span class="icons-list__item-name">off.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/oil.svg" /><span class="icons-list__item-name">oil.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/ok-circle.svg" /><span class="icons-list__item-name">ok-circle.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/ok-sign.svg" /><span class="icons-list__item-name">ok-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/ok.svg" /><span class="icons-list__item-name">ok.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/open-file.svg" /><span class="icons-list__item-name">open-file.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/open.svg" /><span class="icons-list__item-name">open.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/option-horizontal.svg" /><span class="icons-list__item-name">option-horizontal.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/option-vertical.svg" /><span class="icons-list__item-name">option-vertical.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/paperclip.svg" /><span class="icons-list__item-name">paperclip.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/paste.svg" /><span class="icons-list__item-name">paste.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pause.svg" /><span class="icons-list__item-name">pause.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pawn.svg" /><span class="icons-list__item-name">pawn.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pdf.svg" /><span class="icons-list__item-name">pdf.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pencil.svg" /><span class="icons-list__item-name">pencil.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/phone-alt.svg" /><span class="icons-list__item-name">phone-alt.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/phone.svg" /><span class="icons-list__item-name">phone.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/picture.svg" /><span class="icons-list__item-name">picture.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/plane.svg" /><span class="icons-list__item-name">plane.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/play-circle.svg" /><span class="icons-list__item-name">play-circle.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/play.svg" /><span class="icons-list__item-name">play.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/plus-sign.svg" /><span class="icons-list__item-name">plus-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/plus.svg" /><span class="icons-list__item-name">plus.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/print.svg" /><span class="icons-list__item-name">print.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin.svg" /><span class="icons-list__item-name">pushpin.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin2.svg" /><span class="icons-list__item-name">pushpin2.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin3.svg" /><span class="icons-list__item-name">pushpin3.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin4.svg" /><span class="icons-list__item-name">pushpin4.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin5.svg" /><span class="icons-list__item-name">pushpin5.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin6.svg" /><span class="icons-list__item-name">pushpin6.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin7.svg" /><span class="icons-list__item-name">pushpin7.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/pushpin8.svg" /><span class="icons-list__item-name">pushpin8.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/qrcode.svg" /><span class="icons-list__item-name">qrcode.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/queen.svg" /><span class="icons-list__item-name">queen.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/question-sign.svg" /><span class="icons-list__item-name">question-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/random.svg" /><span class="icons-list__item-name">random.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/record.svg" /><span class="icons-list__item-name">record.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/refresh.svg" /><span class="icons-list__item-name">refresh.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/registration-mark.svg" /><span class="icons-list__item-name">registration-mark.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/remove-circle.svg" /><span class="icons-list__item-name">remove-circle.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/remove-sign.svg" /><span class="icons-list__item-name">remove-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/remove.svg" /><span class="icons-list__item-name">remove.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/repeat.svg" /><span class="icons-list__item-name">repeat.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/reset.svg" /><span class="icons-list__item-name">reset.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/resize-full.svg" /><span class="icons-list__item-name">resize-full.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/resize-horizontal.svg" /><span class="icons-list__item-name">resize-horizontal.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/resize-small.svg" /><span class="icons-list__item-name">resize-small.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/resize-vertical.svg" /><span class="icons-list__item-name">resize-vertical.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/retweet.svg" /><span class="icons-list__item-name">retweet.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/road.svg" /><span class="icons-list__item-name">road.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/ruble.svg" /><span class="icons-list__item-name">ruble.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/save-alt.svg" /><span class="icons-list__item-name">save-alt.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/save-file.svg" /><span class="icons-list__item-name">save-file.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/saved.svg" /><span class="icons-list__item-name">saved.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/scale.svg" /><span class="icons-list__item-name">scale.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/scissors.svg" /><span class="icons-list__item-name">scissors.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/screenshot.svg" /><span class="icons-list__item-name">screenshot.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sd-video.svg" /><span class="icons-list__item-name">sd-video.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/search.svg" /><span class="icons-list__item-name">search.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/seat-belt.svg" /><span class="icons-list__item-name">seat-belt.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/send.svg" /><span class="icons-list__item-name">send.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/share-alt.svg" /><span class="icons-list__item-name">share-alt.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/share.svg" /><span class="icons-list__item-name">share.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/shopping-cart.svg" /><span class="icons-list__item-name">shopping-cart.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/signal.svg" /><span class="icons-list__item-name">signal.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sorting-asc.svg" /><span class="icons-list__item-name">sorting-asc.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sorting-desc.svg" /><span class="icons-list__item-name">sorting-desc.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sorting.svg" /><span class="icons-list__item-name">sorting.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sound-5-1.svg" /><span class="icons-list__item-name">sound-5-1.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sound-6-1.svg" /><span class="icons-list__item-name">sound-6-1.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sound-7-1.svg" /><span class="icons-list__item-name">sound-7-1.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sound-dolby.svg" /><span class="icons-list__item-name">sound-dolby.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sound-stereo.svg" /><span class="icons-list__item-name">sound-stereo.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/star-empty.svg" /><span class="icons-list__item-name">star-empty.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/star.svg" /><span class="icons-list__item-name">star.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/stats.svg" /><span class="icons-list__item-name">stats.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/step-backward.svg" /><span class="icons-list__item-name">step-backward.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/step-forward.svg" /><span class="icons-list__item-name">step-forward.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/stop.svg" /><span class="icons-list__item-name">stop.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/subscript.svg" /><span class="icons-list__item-name">subscript.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/subtitles.svg" /><span class="icons-list__item-name">subtitles.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/sunglasses.svg" /><span class="icons-list__item-name">sunglasses.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/superscript.svg" /><span class="icons-list__item-name">superscript.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/tag.svg" /><span class="icons-list__item-name">tag.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/tags.svg" /><span class="icons-list__item-name">tags.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/task.svg" /><span class="icons-list__item-name">task.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/text-background.svg" /><span class="icons-list__item-name">text-background.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/text-color.svg" /><span class="icons-list__item-name">text-color.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/text-height.svg" /><span class="icons-list__item-name">text-height.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/text-size.svg" /><span class="icons-list__item-name">text-size.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/text-width.svg" /><span class="icons-list__item-name">text-width.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/th-large.svg" /><span class="icons-list__item-name">th-large.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/th-list.svg" /><span class="icons-list__item-name">th-list.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/th.svg" /><span class="icons-list__item-name">th.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/thumbs-down.svg" /><span class="icons-list__item-name">thumbs-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/thumbs-up.svg" /><span class="icons-list__item-name">thumbs-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/time.svg" /><span class="icons-list__item-name">time.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/tint.svg" /><span class="icons-list__item-name">tint.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/tow-truck.svg" /><span class="icons-list__item-name">tow-truck.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/towed-car.svg" /><span class="icons-list__item-name">towed-car.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/tower.svg" /><span class="icons-list__item-name">tower.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/transfer.svg" /><span class="icons-list__item-name">transfer.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/trash.svg" /><span class="icons-list__item-name">trash.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/tree-conifer.svg" /><span class="icons-list__item-name">tree-conifer.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/tree-deciduous.svg" /><span class="icons-list__item-name">tree-deciduous.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/twitter-logo-silhouette.svg" /><span class="icons-list__item-name">twitter-logo-silhouette.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/uncheck.svg" /><span class="icons-list__item-name">uncheck.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/unlock.svg" /><span class="icons-list__item-name">unlock.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/upload.svg" /><span class="icons-list__item-name">upload.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/usd.svg" /><span class="icons-list__item-name">usd.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/user.svg" /><span class="icons-list__item-name">user.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/volume-down.svg" /><span class="icons-list__item-name">volume-down.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/volume-off.svg" /><span class="icons-list__item-name">volume-off.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/volume-up.svg" /><span class="icons-list__item-name">volume-up.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/warning-sign.svg" /><span class="icons-list__item-name">warning-sign.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/wrench.svg" /><span class="icons-list__item-name">wrench.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/xls.svg" /><span class="icons-list__item-name">xls.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/yen.svg" /><span class="icons-list__item-name">yen.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/youtube-symbol.svg" /><span class="icons-list__item-name">youtube-symbol.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/zoom-in.svg" /><span class="icons-list__item-name">zoom-in.svg </span></li>
    <li class="icons-list__item"><img class="icons-list__item-icon" src="../.././iconsToolkit/zoom-out.svg" /><span class="icons-list__item-name">zoom-out.svg </span></li>
</ul>
Copied
No style

React interactions

Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.

Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.react storybook

Generales Guidelines

Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.

Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.

1) Général

Les icônes sont des symboles représentant des idées, objets ou actions. Ils communiquent rapidement, facilitent la densité, l’interactivité, les niveaux d’importance des informations.

2) Taille

Les icônes doivent être utilisés en accord avec la taille des textes juxtaposés: 16x16px ou 32x32px.

Les icônes « boutons » doivent mesurer 40x40px minimum.

3) Couleur

La couleur d’un pictogramme accompagnant un texte doit être la même.

4) Alignement

Les icônes doivent être alignés verticalement avec les textes.

icones

Style

Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.

On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System

Imports SASS

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-icon/dist/icons.scss';

Structure

A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.

Typography

Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Class Font-size (px/rem) Font-weight Font-family
.glyphicon 16 / 1 400 Source Sans Pro Regular
Policy Privacy © 2020 AXA All Rights Reserved