.icon { width: 22px; position: relative; display: inline-block; vertical-align: middle; }
.icon::before { width: 100%; padding-top: 100%; background-size: 100% auto; background-position: center center; background-repeat: no-repeat; display: block; content: '';  }

.icn-event::before { background-image: url(../img/common/nav-event.png); }
a:hover .icn-event::before,
.active .icn-event::before { background-image: url(../img/common/nav-event-red.png); }
.icn-event-white::before { background-image: url(../img/common/icn-event-white.png); }

.icn-consult::before { background-image: url(../img/common/nav-consult.png); }
a:hover .icn-consult::before,
.active .icn-consult::before { background-image: url(../img/common/nav-consult-red.png); }
.icn-consult-white::before { background-image: url(../img/common/icn-consult-white.png); }

.icn-doc::before { background-image: url(../img/common/nav-doc.png); }
a:hover .icn-doc::before,
.active .icn-doc::before { background-image: url(../img/common/nav-doc-red.png); }
.icn-doc-white::before { background-image: url(../img/common/icn-doc-white.png); }

.icn-company::before { background-image: url(../img/common/nav-company.png); }
a:hover .icn-company::before,
.active .icn-company::before { background-image: url(../img/common/nav-company-red.png); }

.icn-date::before { background-image: url(../img/common/icn-date.png); }
.icn-pin::before { background-image: url(../img/common/icn-pin.png); }
.icn-ig::before { background-image: url(../img/common/icn-ig.png); }
.icn-yt::before { background-image: url(../img/common/icn-yt.png); }