[class^="i-"] {
    display: inline-flex;
    height: 20px;
    vertical-align: middle;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* Icon colour */
    background: linear-gradient(135deg, var(--col2), var(--col3), var(--col4));
}

.i-account {
    aspect-ratio: 55/64;
    -webkit-mask-image: url('../public/gfx/icons/account.svg');
    mask-image: url('../public/gfx/icons/account.svg');
}

.i-admin {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/admin.svg');
    mask-image: url('../public/gfx/icons/admin.svg');
}

.i-angle-left {
    aspect-ratio: 36/64;
    -webkit-mask-image: url('../public/gfx/icons/angle-left.svg');
    mask-image: url('../public/gfx/icons/angle-left.svg');
}

.i-angle-right {
    aspect-ratio: 36/64;
    -webkit-mask-image: url('../public/gfx/icons/angle-right.svg');
    mask-image: url('../public/gfx/icons/angle-right.svg');
}

.i-angles-left {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/angles-left.svg');
    mask-image: url('../public/gfx/icons/angles-left.svg');
}

.i-angles-right {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/angles-right.svg');
    mask-image: url('../public/gfx/icons/angles-right.svg');
}

.i-arrow-left {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/arrow-left.svg');
    mask-image: url('../public/gfx/icons/arrow-left.svg');
}

.i-arrow-right {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/arrow-right.svg');
    mask-image: url('../public/gfx/icons/arrow-right.svg');
}

.i-award {
    aspect-ratio: 50/64;
    -webkit-mask-image: url('../public/gfx/icons/award.svg');
    mask-image: url('../public/gfx/icons/award.svg');
}

.i-baby {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/baby.svg');
    mask-image: url('../public/gfx/icons/baby.svg');
}

.i-ban {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/ban.svg');
    mask-image: url('../public/gfx/icons/ban.svg');
}

.i-bin {
    aspect-ratio: 52/64;
    -webkit-mask-image: url('../public/gfx/icons/bin.svg');
    mask-image: url('../public/gfx/icons/bin.svg');
}

.i-bubble-tail {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/bubble-tail.svg');
    mask-image: url('../public/gfx/icons/bubble-tail.svg');
}

.i-chat {
    aspect-ratio: 70/64;
    -webkit-mask-image: url('../public/gfx/icons/chat.svg');
    mask-image: url('../public/gfx/icons/chat.svg');
}

.i-chat-outline {
    aspect-ratio: 70/64;
    -webkit-mask-image: url('../public/gfx/icons/chat-outline.svg');
    mask-image: url('../public/gfx/icons/chat-outline.svg');
}

.i-chats0 {
    aspect-ratio: 79/64;
    -webkit-mask-image: url('../public/gfx/icons/chats0.svg');
    mask-image: url('../public/gfx/icons/chats0.svg');
}

.i-chats1 {
    aspect-ratio: 79/64;
    -webkit-mask-image: url('../public/gfx/icons/chats1.svg');
    mask-image: url('../public/gfx/icons/chats1.svg');
}

.i-chats2 {
    aspect-ratio: 79/64;
    -webkit-mask-image: url('../public/gfx/icons/chats2.svg');
    mask-image: url('../public/gfx/icons/chats2.svg');
}

.i-child {
    aspect-ratio: 48/64;
    -webkit-mask-image: url('../public/gfx/icons/child.svg');
    mask-image: url('../public/gfx/icons/child.svg');
}

.i-close {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/close.svg');
    mask-image: url('../public/gfx/icons/close.svg');
}

.i-commcreds {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/commcreds.svg');
    mask-image: url('../public/gfx/icons/commcreds.svg');
}

.i-drinking {
    aspect-ratio: 36/64;
    -webkit-mask-image: url('../public/gfx/icons/drinking.svg');
    mask-image: url('../public/gfx/icons/drinking.svg');
}

.i-drugs {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/drugs.svg');
    mask-image: url('../public/gfx/icons/drugs.svg');
}

.i-envelope {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/envelope.svg');
    mask-image: url('../public/gfx/icons/envelope.svg');
}

.i-envelope-outline {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/envelope-outline.svg');
    mask-image: url('../public/gfx/icons/envelope-outline.svg');
}

.i-ethnicity {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/ethnicity.svg');
    mask-image: url('../public/gfx/icons/ethnicity.svg');
}

.i-eye {
    aspect-ratio: 82/64;
    -webkit-mask-image: url('../public/gfx/icons/eye.svg');
    mask-image: url('../public/gfx/icons/eye.svg');
}

.i-eye-slash {
    aspect-ratio: 82/64;
    -webkit-mask-image: url('../public/gfx/icons/eye-slash.svg');
    mask-image: url('../public/gfx/icons/eye-slash.svg');
}


.i-film {
    aspect-ratio: 56/64;
    -webkit-mask-image: url('../public/gfx/icons/film.svg');
    mask-image: url('../public/gfx/icons/film.svg');
}

.i-filters {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/filters.svg');
    mask-image: url('../public/gfx/icons/filters.svg');
}

.i-flag {
    aspect-ratio: 54/64;
    -webkit-mask-image: url('../public/gfx/icons/flag.svg');
    mask-image: url('../public/gfx/icons/flag.svg');
}

.i-food {
    aspect-ratio: 40/64;
    -webkit-mask-image: url('../public/gfx/icons/food.svg');
    mask-image: url('../public/gfx/icons/food.svg');
}

.i-foods {
    aspect-ratio: 82/64;
    -webkit-mask-image: url('../public/gfx/icons/foods.svg');
    mask-image: url('../public/gfx/icons/foods.svg');
}

.i-grid {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/grid.svg');
    mask-image: url('../public/gfx/icons/grid.svg');
}

.i-hair {
    aspect-ratio: 76/64;
    -webkit-mask-image: url('../public/gfx/icons/hair.svg');
    mask-image: url('../public/gfx/icons/hair.svg');
}

.i-heart {
    aspect-ratio: 72/64;
    -webkit-mask-image: url('../public/gfx/icons/heart.svg');
    mask-image: url('../public/gfx/icons/heart.svg');
}

.i-heart-outline {
    aspect-ratio: 72/64;
    -webkit-mask-image: url('../public/gfx/icons/heart-outline.svg');
    mask-image: url('../public/gfx/icons/heart-outline.svg');
}

.i-height {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/height.svg');
    mask-image: url('../public/gfx/icons/height.svg');
}

.i-hobbies {
    aspect-ratio: 60/64;
    -webkit-mask-image: url('../public/gfx/icons/hobbies.svg');
    mask-image: url('../public/gfx/icons/hobbies.svg');
}

.i-home {
    aspect-ratio: 72/64;
    -webkit-mask-image: url('../public/gfx/icons/home.svg');
    mask-image: url('../public/gfx/icons/home.svg');
}

.i-info {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/info.svg');
    mask-image: url('../public/gfx/icons/info.svg');
}

.i-link {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/link.svg');
    mask-image: url('../public/gfx/icons/link.svg');
}

.i-maximise {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/maximise.svg');
    mask-image: url('../public/gfx/icons/maximise.svg');
}

.i-minimise {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/minimise.svg');
    mask-image: url('../public/gfx/icons/minimise.svg');
}

.i-music {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/music.svg');
    mask-image: url('../public/gfx/icons/music.svg');
}

.i-notifications {
    aspect-ratio: 50/64;
    -webkit-mask-image: url('../public/gfx/icons/notifications.svg');
    mask-image: url('../public/gfx/icons/notifications.svg');
}

.i-online {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/online.svg');
    mask-image: url('../public/gfx/icons/online.svg');
}

.i-pear {
    aspect-ratio: 42/64;
    -webkit-mask-image: url('../public/gfx/icons/pear.svg');
    mask-image: url('../public/gfx/icons/pear.svg');
}

.i-personality {
    aspect-ratio: 55/64;
    -webkit-mask-image: url('../public/gfx/icons/personality.svg');
    mask-image: url('../public/gfx/icons/personality.svg');
}

.i-pet {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/pet.svg');
    mask-image: url('../public/gfx/icons/pet.svg');
}

.i-pin {
    aspect-ratio: 32/64;
    -webkit-mask-image: url('../public/gfx/icons/pin.svg');
    mask-image: url('../public/gfx/icons/pin.svg');
}

.i-politics {
    aspect-ratio: 84/64;
    -webkit-mask-image: url('../public/gfx/icons/politics.svg');
    mask-image: url('../public/gfx/icons/politics.svg');
}


.i-privacy {
    aspect-ratio: 96/64;
    -webkit-mask-image: url('../public/gfx/icons/privacy.svg');
    mask-image: url('../public/gfx/icons/privacy.svg');
}

.i-profile {
    aspect-ratio: 58/64;
    -webkit-mask-image: url('../public/gfx/icons/profile.svg');
    mask-image: url('../public/gfx/icons/profile.svg');
}

.i-religion {
    aspect-ratio: 79/64;
    -webkit-mask-image: url('../public/gfx/icons/religion.svg');
    mask-image: url('../public/gfx/icons/religion.svg');
}

.i-search {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/search.svg');
    mask-image: url('../public/gfx/icons/search.svg');
}

.i-search-reverse {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/search-reverse.svg');
    mask-image: url('../public/gfx/icons/search-reverse.svg');
}

.i-send {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/send.svg');
    mask-image: url('../public/gfx/icons/send.svg');
}

.i-settings {
    aspect-ratio: 60/64;
    -webkit-mask-image: url('../public/gfx/icons/settings.svg');
    mask-image: url('../public/gfx/icons/settings.svg');
}

.i-sex-bricks {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/sex-bricks.svg');
    mask-image: url('../public/gfx/icons/sex-bricks.svg');
}

.i-sexuality {
    aspect-ratio: 50/64;
    -webkit-mask-image: url('../public/gfx/icons/sexuality.svg');
    mask-image: url('../public/gfx/icons/sexuality.svg');
}

.i-sign-in {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/sign-in.svg');
    mask-image: url('../public/gfx/icons/sign-in.svg');
}

.i-sign-out {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/sign-out.svg');
    mask-image: url('../public/gfx/icons/sign-out.svg');
}

.i-sign-up {
    aspect-ratio: 89/64;
    -webkit-mask-image: url('../public/gfx/icons/sign-up.svg');
    mask-image: url('../public/gfx/icons/sign-up.svg');
}

.i-smoking {
    aspect-ratio: 80/64;
    -webkit-mask-image: url('../public/gfx/icons/smoking.svg');
    mask-image: url('../public/gfx/icons/smoking.svg');
}

.i-sport {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/sport.svg');
    mask-image: url('../public/gfx/icons/sport.svg');
}

.i-sun {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/sun.svg');
    mask-image: url('../public/gfx/icons/sun.svg');
}

.i-terms {
    aspect-ratio: 80/64;
    -webkit-mask-image: url('../public/gfx/icons/terms.svg');
    mask-image: url('../public/gfx/icons/terms.svg');
}

.i-tricks {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/tricks.svg');
    mask-image: url('../public/gfx/icons/tricks.svg');
}

.i-tv {
    aspect-ratio: 72/64;
    -webkit-mask-image: url('../public/gfx/icons/tv.svg');
    mask-image: url('../public/gfx/icons/tv.svg');
}

.i-vol0 {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/vol0.svg');
    mask-image: url('../public/gfx/icons/vol0.svg');
}

.i-vol1 {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/vol1.svg');
    mask-image: url('../public/gfx/icons/vol1.svg');
}

.i-vol2 {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/vol2.svg');
    mask-image: url('../public/gfx/icons/vol2.svg');
}

.i-vol3 {
    aspect-ratio: 85/64;
    -webkit-mask-image: url('../public/gfx/icons/vol3.svg');
    mask-image: url('../public/gfx/icons/vol3.svg');
}

.i-wip {
    aspect-ratio: 64/64;
    -webkit-mask-image: url('../public/gfx/icons/wip.svg');
    mask-image: url('../public/gfx/icons/wip.svg');
}