.icon { line-height: 1; position: relative; img { width: 100%; height: 100%; display: block; } } .invert { filter: invert(100%); } .rotating { /* Define the keyframes for the animation */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Apply the animation to the element */ animation: rotate .7s ease-out infinite; /* Rotate infinitely over 2 seconds using a linear timing function */ } .notificationsCounter { background-color: #d00820; border: 2px solid #fff; border-radius: 2em; color: #fff; font-size: 1rem; font-weight: 700; height: 1.6em; left: 1.1em; line-height: 1.25em; padding: 0 0.25em; position: absolute; text-align: center; top: -0.5rem; min-width: 1.5em; }