.icon::before {
    --size: 1.5em;
    display: block;
    content: '';
    background-color: currentColor;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    width: var( --size );
    height: var( --size );
}

/* SIZES */

.icon-small::before { --size: 1em; }

.icon-normal::before { --size: 1.5em; }

.icon-big::before { --size: 2em; }

/* COLORS */

.icon-red { color: var( --color-red-dark ); }

.icon-red:hover { color: var( --color-red-light ); }

.icon-blue { color: var( --color-blue-dark ); }

.icon-blue:hover { color: var( --color-blue-light ); }

.icon-cyan { color: var( --color-cyan-dark ); }

.icon-cyan:hover { color: var( --color-cyan-light ); }

.icon-yellow { color: var( --color-yellow-dark ); }

.icon-yellow:hover { color: var( --color-yellow-light ); }

/* ICONS */

.icon-add::before { mask-image: url( '/Image/Icons/add.svg' ); }

.icon-back::before { mask-image: url( '/Image/Icons/back.svg' ); }

.icon-copy::before { mask-image: url( '/Image/Icons/copy.svg' ); }

.icon-directory::before { mask-image: url( '/Image/Icons/directory.svg' ); }

.icon-down::before { mask-image: url( '/Image/Icons/down.svg' ); }

.icon-edit::before { mask-image: url( '/Image/Icons/edit.svg' ); }

.icon-file::before { mask-image: url( '/Image/Icons/file.svg' ); }

.icon-forward::before { mask-image: url( '/Image/Icons/forward.svg' ); }

.icon-menu::before { mask-image: url( '/Image/Icons/menu.svg' ); }

.icon-modules::before { mask-image: url( '/Image/Icons/modules.svg' ); }

.icon-move::before { mask-image: url( '/Image/Icons/move.svg' ); }

.icon-overview::before { mask-image: url( '/Image/Icons/overview.svg' ); }

.icon-pdf::before { mask-image: url( '/Image/Icons/pdf.svg' ); }

.icon-trash::before { mask-image: url( '/Image/Icons/trash.svg' ); }

.icon-up::before { mask-image: url( '/Image/Icons/up.svg' ); }

.icon-user::before { mask-image: url( '/Image/Icons/user.svg' ); }