NJ Web Design System (v2.1.0)

Icon list: Default 

<ul class="usa-icon-list">
    <li class="usa-icon-list__item">
        <div class="usa-icon-list__icon text-green">
            <svg class="usa-icon" aria-hidden="true" role="img">
                <use xlink:href="../../dist/img/sprite.svg#check_circle"></use>
            </svg>
        </div>
        <div class="usa-icon-list__content">
            Wash your hands for 20 seconds with soap
        </div>
    </li>
    <li class="usa-icon-list__item">
        <div class="usa-icon-list__icon text-green">
            <svg class="usa-icon" aria-hidden="true" role="img">
                <use xlink:href="../../dist/img/sprite.svg#check_circle"></use>
            </svg>
        </div>
        <div class="usa-icon-list__content">
            Stay six feet away from others
        </div>
    </li>
    <li class="usa-icon-list__item">
        <div class="usa-icon-list__icon text-red">
            <svg class="usa-icon" aria-hidden="true" role="img">
                <use xlink:href="../../dist/img/sprite.svg#cancel"></use>
            </svg>
        </div>
        <div class="usa-icon-list__content">
            Avoid large gatherings
        </div>
    </li>
</ul>

No notes defined.

<ul class="usa-icon-list{% if color %} usa-icon-list--{{ color }}{% endif %}{% if size %} usa-icon-list--size-{{ size }}{% endif %}">
  {%- for item in items -%}
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon{% if item.icon.color %} text-{{ item.icon.color }}{% endif %}">
      <svg class="usa-icon{% if item.icon.utilities %} {{ item.icon.utilities }}{% endif %}" aria-hidden="true" role="img">
        <use xlink:href="../../dist/img/sprite.svg#{{ item.icon.name }}"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      {{ item.content | safe }}
    </div>
  </li>
  {%- endfor -%}
</ul>
 
package:
  name: null
  version: 2.1.0
uswds:
  path: ../../dist
items:
  - icon:
      name: check_circle
      color: green
    content: Wash your hands for 20 seconds with soap
  - icon:
      name: check_circle
      color: green
    content: Stay six feet away from others
  - icon:
      name: cancel
      color: red
    content: Avoid large gatherings