PatternLab (1.0.18)

Appearance

Circular Icon new ​

A DuoTone Icon (dark) or FontAwesome icon that is enclosed in a circle to offer better visual consistency and contrast - with an optional second Modifier Icon or Status Signal.

Size Modifiers ​

.c-circular-icon[.-xs, .-sm, .-md, .-lg]

Show Code
html
<div class="h-flex h-flex-row gap-m">
  <div class="c-circular-icon -xs" aria-hidden="true">
    <i class="c-duotone-icon -pruefung_dark -sm"></i>
  </div>

  <div class="c-circular-icon -sm" aria-hidden="true">
    <i class="c-duotone-icon -pruefung_dark -md"></i>
  </div>

  <div class="c-circular-icon -md" aria-hidden="true">
    <i class="c-duotone-icon -pruefung_dark -lg"></i>
  </div>

  <div class="c-circular-icon -lg" aria-hidden="true">
    <i class="c-duotone-icon -pruefung_dark -lg"></i>
  </div>
</div>

With FontAwesome Icon ​

Show Code
html
<div class="h-flex h-flex-row gap-m">
  <div class="c-circular-icon -xs" aria-hidden="true">
    <i class="fad fa-info-circle fa-1x"></i>
  </div>

  <div class="c-circular-icon -sm" aria-hidden="true">
    <i class="fad fa-info-circle fa-1-5x"></i>
  </div>

  <div class="c-circular-icon -md" aria-hidden="true">
    <i class="fad fa-info-circle fa-2x"></i>
  </div>

  <div class="c-circular-icon -lg" aria-hidden="true">
    <i class="fad fa-info-circle fa-3x"></i>
  </div>
</div>

Color Modifiers ​

.c-circular-icon[.-is-disabled, .-is-static]

Show Code
html
<div class="h-flex h-flex-row gap-l">
  <div class="c-circular-icon -is-disabled -lg" aria-hidden="true">
    <i class="c-duotone-icon -taxierung_dark -md -is-disabled"></i>
    <div class="c-context-icon -top -edit -is-disabled">
      <i class="far fa-pen"></i>
    </div>
  </div>
  <div class="c-circular-icon -is-static -lg" aria-hidden="true">
    <i class="c-duotone-icon -defektur_dark -lg"></i>
    <div class="c-context-icon -top -neu">
      <i class="far fa-plus"></i>
    </div>
  </div>
</div>

Status Badge Modifier ​

The status badge modifier class can be used to add a little dot to the top right corner of the circular icon:

c-circular-icon -has-status[.-success, .-warning, .-error]

Show Code
html
<div class="h-flex h-flex-row gap-l">
  <div class="c-circular-icon -xs -has-status" aria-hidden="true">
    <i class="c-duotone-icon -cannabis_dark -sm"></i>
  </div>
  <div class="c-circular-icon -sm -has-status -error" aria-hidden="true">
    <i class="c-duotone-icon -cannabis_dark -md"></i>
  </div>
  <div class="c-circular-icon -md -has-status -warning" aria-hidden="true">
    <i class="c-duotone-icon -cannabis_dark -lg"></i>
  </div>
  <div class="c-circular-icon -lg -has-status -success" aria-hidden="true">
    <i class="c-duotone-icon -cannabis_dark -lg"></i>
  </div>
</div>

With Context Icon ​

The Circular Icon can be combined with a smaller Context Icon to indicate the status or category of a record. The context icon is positioned in the bottom (default) or top right corner of the circular icon and uses FontAwesome icons.

.c-circular-icon > .c-context-icon[.-xs][.-top][.-readonly, .-new, etc.]

See Context Icon for all existing variants.

Show Code
html
<div class="h-flex h-flex-row gap-l">
  <div class="c-circular-icon -xs" aria-hidden="true">
    <i class="c-duotone-icon -archiv_dark -sm"></i>
    <div class="c-context-icon -top -trash -xs">
      <i class="fas fa-trash"></i>
    </div>
  </div>

  <div class="c-circular-icon -sm" aria-hidden="true">
    <i class="c-duotone-icon -abfuellung_dark -md"></i>
    <div class=" c-context-icon -top -readonly -sm">
      <i class="fas fa-eye"></i>
    </div>
  </div>
  <div class="c-circular-icon -md" aria-hidden="true">
    <i class="c-duotone-icon -taxierung_dark -md"></i>
    <div class="c-context-icon -top -edit">
      <i class="far fa-pen"></i>
    </div>
  </div>
  <div class="c-circular-icon -is-static -lg" aria-hidden="true">
    <i class="c-duotone-icon -defektur_dark -lg"></i>
    <div class="c-context-icon -top -neu -top">
      <i class="far fa-plus"></i>
    </div>
  </div>
</div>

WARNING

The top position is only used in Main Icon Headlines at the moment.

2026 - Pharma4u