Monday, April 6, 2026 | Good morning!

FlyingWPress

Icon List

January 26, 2025

Kevin Geary had a great video on creating very flexible bullet lists using the rich text element and some custom CSS. I have done something similar, but this is so much more flexible. I recommend you watch the video. Here is the CSS.

/* .checklist */
%root% {
  --icon-url: url(/wp-content/uploads/sites/12/2025/01/check-bullet-blue.svg);
  --icon-color: var(--primary-dark);
  --icon-size: 1em;
  --icon-offset: 0 .65ex;
  --icon-gap:.5em;
}

%root% ul {
  list-style: none;
  padding: 0;
}

%root% li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--icon-gap);

  &::before {
    content: '';
    display: flex;
    background: var(--icon-color);
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    translate: var(--icon-offset);
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-size: cover;
    mask-image: var(--icon-url);
    mask-size: cover;
  }
}

/* .checklist--blue */

%root%{
  --icon-color: var(--primary-semi-light);
  --icon-size:2em;
  --icon-gap:2em;
}

/* .checklist--green-x */

%root%{
  --icon-color:var(--success);
  --icon-url:url(/wp-content/uploads/sites/12/2025/01/red-x-circles.svg)
}
CSS

If you are not using Bricks Builder and the %root% concept. If you are using WordPress core you can either remove checklist ul and add all the “ul” related styles directly to the list with a class of checklist or wrap it in a group and add the checklist class to the group.

screenshot of the list in a group block.

/* .checklist */
.checklist {
  --icon-url: url(/wp-content/uploads/sites/12/2025/01/check-bullet-blue.svg);
  --icon-color: var(--primary-dark);
  --icon-size: 1em;
  --icon-offset: 0 .65ex;
  --icon-gap:.5em;
}

.checklist ul {
  list-style: none;
  padding: 0;
}

.checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--icon-gap);

  &::before {
    content: '';
    display: flex;
    background: var(--icon-color);
    inline-size: var(--icon-size);
    block-size: var(--icon-size);
    translate: var(--icon-offset);
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-size: cover;
    mask-image: var(--icon-url);
    mask-size: cover;
  }
}

/* .checklist--blue */

.checklist--blue{
  --icon-color: var(--primary-semi-light);
  --icon-size:2em;
  --icon-gap:2em;
}

/* .checklist--green-x */

.checklist--green-x {
  --icon-color:var(--success);
  --icon-url:url(/wp-content/uploads/sites/12/2025/01/red-x-circles.svg)
}
CSS

This is a test – checklist

  • List item 1
  • List item 2
  • List item 3
  • List Item 4

This is a test – checklist checklist–green-x

  • List item 1
  • List item 2
  • List item 3
  • List Item 4

Leave a Reply

Featured