.rounded-icon {
    border-radius: 5rem;
    padding: 0.25rem;
    aspect-ratio: 1/1;
}
.icon {
    width: 2em;
    height: 2em;
    display: inline-block;
    mask: var(--icon-svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: black;
}
.icon.icon-sm{
    width: 1rem;
    height: 1rem;
}
/*Combine with background color to change color*/
.icon.icon-link {
    --icon-svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>');
}
.icon.icon-crochet-hook {
    --icon-svg: url('/assets/icons/icon_crochet_hook.png');
}