Labeled graphic states and numbering over 9

The markers in a labeled graphic have several ‘states’ including a completed state.

Below are some modifications I made including stopping the marker pulse animation, a custom color outline, and a completed check mark on the completed state. Download this XD file if you want to design your own custom markers and test with your images.

/* remove marker pulse animation */

button .labeled-graphic-marker__pin::after {

/* this automatically adds numbers to replace the default + icon in a labeled graphic. Select a different icon if you don't want numbers on another labeled graphic in your course */

.labeled-graphic-canvas ol {counter-reset: css-counter 0;}
ol {counter-increment: css-counter 1;}

ol i.icon.icon-Master-01::before {
  content: counter(css-counter);
  color:black; font-weight:600; font-size:16px;
  font-family: var(--font-family-ui);
  line-height: 1.8;
  display: block;

/* optional- extra accent color around marker, set to a background-color */
.labeled-graphic-marker.labeled-graphic-marker--visible {

/* completed state: remove accent color above */
.labeled-graphic-marker--complete.labeled-graphic-marker--visible {

/* completed state: change number to checkmark */
button.labeled-graphic-marker--complete:not(.labeled-graphic-marker--active).labeled-graphic-marker--visible i.icon.icon-Master-01::before {

/* for smaller screens, scale down markers, remove extra hilight color */
@media only screen and (max-width : 768px) {
.labeled-graphic-marker.labeled-graphic-marker--visible {
  background: transparent;
ol i.icon.icon-Master-01::before {
font-weight:400; font-size:12px;
     line-height: 1.6;

Getting started with theme components? Download the blank theme component css file.
Watch: installing a theme component.