Skip to main content
Question

Change colour on icon within UI status card

  • January 28, 2026
  • 1 reply
  • 61 views
N
Novice III

I changed the colour on the UI status badge (One colour for not started, in progress and completed). Like shown on the picture underneath with the badge for in progress:
 

It did change to the colours that I wanted, but not on the icons:
 

I tried to change the colour, but with no luck. Anyone who knows how to change the colour on icon only within the UI bagdes? 

Underneath is the code I used a from another community thread (with some additional css added) to add new colour to the badges:
 

/* *********************************************** */

/* Course Status Label Colors - Card, List, Channels */

/* *********************************************** */

/* Not Started */

.ui-badge-status-success,

.ui-list-item-status-not_started .ui-badge-status-success {

background-color: #FAE4E2 !important;

border: solid 1px #666666;

color: #333333 !important;

}

/* In Progress */

.ui-badge-status-neutral,

.ui-list-item-status-in_progress .ui-badge-status-neutral,

.ui-card-status-in_progress .ui-badge-status-neutral {

background-color: #FAE6C6 !important;

border: solid 1px #666666;

color: #333333 !important;

}

/* Completed */

.ui-card-header:has(+ ui-card-content span.color-accent-tertiary) .ui-badge-status-neutral,

.ui-list-item-status-completed .ui-badge-status-neutral,

.ui-card-status-completed .ui-badge-status-neutral {

background-color: #DAEDDD !important;

color: #ffffff !important;

}

 

    1 reply

    S
    Influencer III
    Forum|alt.badge.img+6
    • sara.cramer
    • Influencer III
    • May 22, 2026

    I’m having a tough time getting the hourglass icon to appear for me because we don't use ILTs often. Can you give other examples where there’s an icon in this status badge so I can try to troubleshoot?

    My thought is the icon is either an SVG or a static image like a PNG. The approach would be different depending on which it is.

    For an SVG, it’s not possible to change the color itself but it may be possible to have a “shader” put over the color (search CSS filters) so it looks different. For a PNG, you would need to swap out the image with another similar to this.

    Terms & ConditionsAccessibility statement