.icon {
   display: inline-block;
   width: 28px;
   height: 28px;
   background: url('./icons.svg') no-repeat;
   background-size: 420px 196px;
   flex-shrink: 0;
   vertical-align: middle;
}

.icon.big {
   transform: scale(1.5);
   margin: 7px;
}

.icon.small {
   transform: scale(0.7143);
   margin: -4px;
}

/* Row 1: Media */
.icon-play        { background-position:     0     0; }
.icon-pause       { background-position:  -28px    0; }
.icon-stop        { background-position:  -56px    0; }
.icon-mic         { background-position:  -84px    0; }
.icon-volume      { background-position: -112px    0; }
.icon-disc        { background-position: -140px    0; }

/* Row 2: Actions */
.icon-upload      { background-position:     0 -28px; }
.icon-download    { background-position:  -28px -28px; }
.icon-search      { background-position:  -56px -28px; }
.icon-check       { background-position:  -84px -28px; }
.icon-pen         { background-position: -112px -28px; }
.icon-crop        { background-position: -140px -28px; }
.icon-copy        { background-position: -168px -28px; }
.icon-trash       { background-position: -196px -28px; }
.icon-plus        { background-position: -224px -28px; }
.icon-xmark       { background-position: -252px -28px; }

/* Row 3: Objects */
.icon-star        { background-position:     0 -56px; }
.icon-heart       { background-position:  -28px -56px; }
.icon-cart        { background-position:  -56px -56px; }
.icon-gift        { background-position:  -84px -56px; }
.icon-lock        { background-position: -112px -56px; }
.icon-bolt        { background-position: -140px -56px; }
.icon-shield      { background-position: -168px -56px; }
.icon-clock       { background-position: -196px -56px; }
.icon-calendar    { background-position: -224px -56px; }
.icon-robot       { background-position: -252px -56px; }
.icon-chat        { background-position: -280px -56px; }
.icon-eye         { background-position: -308px -56px; }
.icon-users       { background-position: -336px -56px; }
.icon-truck       { background-position: -364px -56px; }
.icon-power       { background-position: -392px -56px; }

/* Row 4: Files */
.icon-file        { background-position:     0 -84px; }
.icon-file-audio  { background-position:  -28px -84px; }
.icon-file-image  { background-position:  -56px -84px; }

/* Row 5: Alignment */
.icon-h-left      { background-position:     0 -112px; }
.icon-h-center    { background-position:  -28px -112px; }
.icon-h-right     { background-position:  -56px -112px; }
.icon-v-top       { background-position:  -84px -112px; }
.icon-v-middle    { background-position: -112px -112px; }
.icon-v-bottom    { background-position: -140px -112px; }

/* Row 6: Navigation */
.icon-chev-left   { background-position:     0 -140px; }
.icon-chev-right  { background-position:  -28px -140px; }
.icon-chev-up     { background-position:  -56px -140px; }
.icon-chev-down   { background-position:  -84px -140px; }
.icon-tri-left    { background-position: -112px -140px; }
.icon-tri-right   { background-position: -140px -140px; }
.icon-tri-up      { background-position: -168px -140px; }
.icon-tri-down    { background-position: -196px -140px; }
.icon-arrow-right { background-position: -224px -140px; }

/* Row 7: Brands */
.icon-spotify     { background-position:     0 -168px; }
.icon-instagram   { background-position:  -28px -168px; }
.icon-tag         { background-position:  -56px -168px; }
.icon-globe       { background-position:  -84px -168px; }
.icon-refresh     { background-position: -112px -168px; }
.icon-grip        { background-position: -140px -168px; }

/* Color filters */
.icon.c-main, .btn.inverted .icon       { filter: invert(70%) sepia(42%) saturate(600%) hue-rotate(131deg) brightness(87%) contrast(87%); }
.icon.c-white, .btn.default .icon     { filter: brightness(0) invert(1); }
.icon.c-grey      { filter: invert(48%) sepia(5%) saturate(300%) hue-rotate(180deg) brightness(95%); }
.icon.c-contrast  { filter: invert(52%) sepia(95%) saturate(1500%) hue-rotate(10deg) brightness(105%); }
.icon.c-err       { filter: invert(38%) sepia(82%) saturate(2000%) hue-rotate(340deg) brightness(95%); }
.icon.c-success   { filter: invert(55%) sepia(70%) saturate(500%) hue-rotate(85deg) brightness(92%); }

.btn .icon {
   transform: scale(0.6);
   margin: -6px;
}