@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;
  }

  .icon--lg { --icon-size: 1.25rem; }
  .icon--xl { --icon-size: 1.5rem; }

  .icon--bell { --svg: url("/assets/bell-b2ed7397.svg"); }
  .icon--home { --svg: url("/assets/home-33415397.svg"); }
  .icon--leads { --svg: url("/assets/leads-33a2f0b1.svg"); }
  .icon--link { --svg: url("/assets/link-16e74813.svg"); }
  .icon--logout { --svg: url("/assets/logout-377a694a.svg"); }
  .icon--mail { --svg: url("/assets/mail-a6e51125.svg"); }
  .icon--refresh { --svg: url("/assets/refresh-b3b1f6bd.svg"); }
  .icon--settings { --svg: url("/assets/settings-fd8f96b4.svg"); }
  .icon--user { --svg: url("/assets/user-8e646ef3.svg"); }
  .icon--users { --svg: url("/assets/users-8eefa07e.svg"); }
  .icon--wallet { --svg: url("/assets/wallet-3021a918.svg"); }
}