@layer components {
  .icon {
    -webkit-touch-callout: none;
    background-color: currentColor;
    block-size: var(--icon-size, 1em);
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--icon-size, 1em);
    mask-image: var(--svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1em);
    pointer-events: none;
    user-select: none;
  }

  img.icon {
    background: none;
  }

  .icon--37signals { --svg: url(/images/37signals.svg); }
  .icon--add { --svg: url(/images/add.svg); }
  .icon--add--meta { --svg: url(/images/add--meta.svg); }
  .icon--arrow-left { --svg: url(/images/arrow-left.svg); }
  .icon--arrow-right { --svg: url(/images/arrow-right.svg); }
  .icon--arrow-up { --svg: url(/images/arrow-up.svg); }
  .icon--art { --svg: url(/images/art.svg); }
  .icon--assigned { --svg: url(/images/assigned.svg); }
  .icon--attachment { --svg: url(/images/attachment.svg); }
  .icon--bell-alert { --svg: url(/images/bell-alert.svg); }
  .icon--bell-off { --svg: url(/images/bell-off.svg); }
  .icon--bell { --svg: url(/images/bell.svg); }
  .icon--bolt { --svg: url(/images/bolt.svg); }
  .icon--bookmark-outline { --svg: url(/images/bookmark-outline.svg); }
  .icon--bookmark { --svg: url(/images/bookmark.svg); }
  .icon--boost { --svg: url(/images/boost.svg); }
  .icon--camera { --svg: url(/images/camera.svg); }
  .icon--caret-down { --svg: url(/images/caret-down.svg); }
  .icon--check { --svg: url(/images/check.svg); }
  .icon--check-circle { --svg: url(/images/check-circle.svg); }
  .icon--check-all { --svg: url(/images/check-all.svg); }
  .icon--clipboard { --svg: url(/images/clipboard.svg); }
  .icon--close { --svg: url(/images/close.svg); }
  .icon--close-circle { --svg: url(/images/close-circle.svg); }
  .icon--collapse { --svg: url(/images/collapse.svg); }
  .icon--board { --svg: url(/images/board.svg); }
  .icon--board-add { --svg: url(/images/board-add.svg); }
  .icon--column-left { --svg: url(/images/column-left.svg); }
  .icon--column-right { --svg: url(/images/column-right.svg); }
  .icon--comment { --svg: url(/images/comment.svg); }
  .icon--copy-paste { --svg: url(/images/copy-paste.svg); }
  .icon--crown { --svg: url(/images/crown.svg); }
  .icon--email { --svg: url(/images/email.svg); }
  .icon--everyone { --svg: url(/images/everyone.svg); }
  .icon--expand { --svg: url(/images/expand.svg); }
  .icon--gear { --svg: url(/images/gear.svg); }
  .icon--grid { --svg: url(/images/grid.svg); }
  .icon--filter { --svg: url(/images/filter.svg); }
  .icon--fizzy { --svg: url(/images/fizzy.svg); }
  .icon--globe { --svg: url(/images/globe.svg); }
  .icon--golden-ticket { --svg: url(/images/golden-ticket.svg); }
  .icon--history { --svg: url(/images/history.svg); }
  .icon--home { --svg: url(/images/home.svg); }
  .icon--install-edge { --svg: url(/images/install-edge.svg); }
  .icon--lifebuoy { --svg: url(/images/lifebuoy.svg); }
  .icon--lock { --svg: url(/images/lock.svg); }
  .icon--logout { --svg: url(/images/logout.svg); }
  .icon--marker { --svg: url(/images/marker.svg); }
  .icon--maximize { --svg: url(/images/maximize.svg); }
  .icon--menu { --svg: url(/images/menu.svg); }
  .icon--menu-dots-horizontal { --svg: url(/images/menu-dots-horizontal.svg); }
  .icon--menu-dots-vertical { --svg: url(/images/menu-dots-vertical.svg); }
  .icon--minus { --svg: url(/images/minus.svg); }
  .icon--monitor { --svg: url(/images/monitor.svg); }
  .icon--moon { --svg: url(/images/moon.svg); }
  .icon--move { --svg: url(/images/move.svg); }
  .icon--notification-bell-access-only { --svg: url(/images/bell.svg); }
  .icon--notification-bell-watching { --svg: url(/images/bell-off.svg); }
  .icon--notification-bell-reverse-access-only { --svg: url(/images/bell-off.svg); }
  .icon--notification-bell-reverse-watching { --svg: url(/images/bell.svg); }
  .icon--password { --svg: url(/images/password.svg); }
  .icon--pencil { --svg: url(/images/pencil.svg); }
  .icon--person { --svg: url(/images/person.svg); }
  .icon--person-add { --svg: url(/images/person-add.svg); }
  .icon--picture-add { --svg: url(/images/picture-add.svg); }
  .icon--picture-double { --svg: url(/images/picture-double.svg); }
  .icon--picture-remove { --svg: url(/images/picture-remove.svg); }
  .icon--picture-zoom { --svg: url(/images/picture-zoom.svg); }
  .icon--pinned { --svg: url(/images/pinned.svg); }
  .icon--qr-code { --svg: url(/images/qr-code.svg); }
  .icon--reaction { --svg: url(/images/reaction.svg); }
  .icon--refresh { --svg: url(/images/refresh.svg); }
  .icon--refresh--meta { --svg: url(/images/refresh--meta.svg); }
  .icon--remove { --svg: url(/images/remove.svg); }
  .icon--rename { --svg: url(/images/rename.svg); }
  .icon--search { --svg: url(/images/search.svg); }
  .icon--settings { --svg: url(/images/settings.svg); }
  .icon--share { --svg: url(/images/share.svg); }
  .icon--sliders { --svg: url(/images/sliders.svg); }
  .icon--sun { --svg: url(/images/sun.svg); }
  .icon--switch { --svg: url(/images/switch.svg); }
  .icon--tag { --svg: url(/images/tag.svg); }
  .icon--tag-outline { --svg: url(/images/tag-outline.svg); }
  .icon--thumb-up { --svg: url(/images/thumb-up.svg); }
  .icon--trash { --svg: url(/images/trash.svg); }
  .icon--unpinned { --svg: url(/images/unpinned.svg); }
  .icon--unseen { --svg: url(/images/unseen.svg); }
  .icon--world { --svg: url(/images/world.svg); }
  .icon--youtube { --svg: url(/images/youtube.svg); }
}