@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-repeat: no-repeat;
    mask-size: cover;
    pointer-events: none;
    user-select: none;
  }

  img.icon {
    background: none;
  }

  .icon--add { --svg: url("add.svg "); }
  .icon--arrow-left { --svg: url("arrow-left.svg "); }
  .icon--arrow-right { --svg: url("arrow-right.svg "); }
  .icon--art { --svg: url("art.svg "); }
  .icon--assigned { --svg: url("assigned.svg "); }
  .icon--bell-off { --svg: url("bell-off.svg "); }
  .icon--bell { --svg: url("bell.svg "); }
  .icon--bolt { --svg: url("bolt.svg "); }
  .icon--bookmark-outline { --svg: url("bookmark-outline.svg "); }
  .icon--bookmark { --svg: url("bookmark.svg "); }
  .icon--camera { --svg: url("camera.svg "); }
  .icon--caret-down { --svg: url("caret-down.svg "); }
  .icon--check { --svg: url("check.svg "); }
  .icon--clipboard { --svg: url("clipboard.svg "); }
  .icon--close { --svg: url("close.svg "); }
  .icon--collection { --svg: url("collection.svg "); }
  .icon--collection-add { --svg: url("collection-add.svg "); }
  .icon--comment { --svg: url("comment.svg "); }
  .icon--copy-paste { --svg: url("copy-paste.svg "); }
  .icon--crown { --svg: url("crown.svg "); }
  .icon--email { --svg: url("email.svg "); }
  .icon--everyone { --svg: url("everyone.svg "); }
  .icon--filter { --svg: url("filter.svg "); }
  .icon--globe { --svg: url("globe.svg "); }
  .icon--golden-ticket { --svg: url("golden-ticket.svg "); }
  .icon--home { --svg: url("home.svg "); }
  .icon--lock { --svg: url("lock.svg "); }
  .icon--logout { --svg: url("logout.svg "); }
  .icon--menu { --svg: url("menu.svg "); }
  .icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); }
  .icon--minus { --svg: url("minus.svg "); }
  .icon--move { --svg: url("move.svg "); }
  .icon--notification-bell-access-only { --svg: url("notification-bell-access-only.svg "); }
  .icon--notification-bell-everything { --svg: url("notification-bell-everything.svg "); }
  .icon--notification-bell-watching { --svg: url("notification-bell-watching.svg "); }
  .icon--password { --svg: url("password.svg "); }
  .icon--pencil { --svg: url("pencil.svg "); }
  .icon--person { --svg: url("person.svg "); }
  .icon--person-add { --svg: url("person-add.svg "); }
  .icon--picture-add { --svg: url("picture-add.svg "); }
  .icon--picture-double { --svg: url("picture-double.svg "); }
  .icon--picture-remove { --svg: url("picture-remove.svg "); }
  .icon--picture-zoom { --svg: url("picture-zoom.svg "); }
  .icon--pinned { --svg: url("pinned.svg "); }
  .icon--qr-code { --svg: url("qr-code.svg "); }
  .icon--reaction { --svg: url("reaction.svg "); }
  .icon--refresh { --svg: url("refresh.svg "); }
  .icon--remove-med { --svg: url("remove-med.svg "); }
  .icon--remove { --svg: url("remove.svg "); }
  .icon--rename { --svg: url("rename.svg "); }
  .icon--search { --svg: url("search.svg "); }
  .icon--settings { --svg: url("settings.svg "); }
  .icon--share { --svg: url("share.svg "); }
  .icon--tag { --svg: url("tag.svg "); }
  .icon--thumb-up { --svg: url("thumb-up.svg "); }
  .icon--trash { --svg: url("trash.svg "); }
  .icon--unpinned { --svg: url("unpinned.svg"); }
  .icon--world { --svg: url("world.svg"); }
}
