.icon--arrow-down { mask: url(../icons/arrow-down.svg); -webkit-mask: url(../icons/arrow-down.svg) } .icon--arrow-left { mask: url(../icons/arrow-left.svg); -webkit-mask: url(../icons/arrow-left.svg) } .icon--arrow-right { mask: url(../icons/arrow-right.svg); -webkit-mask: url(../icons/arrow-right.svg) } .icon--arrow { mask: url(../icons/arrow.svg); -webkit-mask: url(../icons/arrow.svg) } .icon--cart { mask: url(../icons/cart.svg); -webkit-mask: url(../icons/cart.svg) } .icon--check { mask: url(../icons/check.svg); -webkit-mask: url(../icons/check.svg) } .icon--chevron-thin { mask: url(../icons/chevron-thin.svg); -webkit-mask: url(../icons/chevron-thin.svg) } .icon--chevron { mask: url(../icons/chevron.svg); -webkit-mask: url(../icons/chevron.svg) } .icon--close { mask: url(../icons/close.svg); -webkit-mask: url(../icons/close.svg) } .icon--contrast { mask: url(../icons/contrast.svg); -webkit-mask: url(../icons/contrast.svg) } .icon--info-circle { mask: url(../icons/info-circle.svg); -webkit-mask: url(../icons/info-circle.svg) } .icon--linkedin { mask: url(../icons/linkedin.svg); -webkit-mask: url(../icons/linkedin.svg) } .icon--mail { mask: url(../icons/mail.svg); -webkit-mask: url(../icons/mail.svg) } .icon--person { mask: url(../icons/person.svg); -webkit-mask: url(../icons/person.svg) } .icon--quote { mask: url(../icons/quote.svg); -webkit-mask: url(../icons/quote.svg) } .icon--search { mask: url(../icons/search.svg); -webkit-mask: url(../icons/search.svg) } .icon--twitter { mask: url(../icons/twitter.svg); -webkit-mask: url(../icons/twitter.svg) } [class^=icon--],[class*=" icon--"]{width:24px;height:24px;display:block;-webkit-mask-size:cover;mask-size:cover;background-color:#000;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;}