View on GitHub

Icons

At OpenFrontend.Framework, we’ve incorporated a wealth of useful icons that we use in our components. Discover more by reading our article.

On this page

Simple icon

To insert your own icon, you can either reference an icon from a sprite file or directly include the SVG path in your HTML. Below are two examples demonstrating these approaches. Using the of-icon class, these icons will adapt to the color and size of their parent element, making them versatile and easy to incorporate into various parts of your UI.

Direct SVG path inclusion:

html

<svg xmlns="http://www.w3.org/2000/svg" class="of-icon">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
</svg>

Referencing an SVG sprite:

html

<svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>

Variants

OpenFrontend.Framework includes several icon circle variants, each serving its own semantic purpose, with a few extras thrown in for more control.

html

<span class="icon-circle icon-circle-primary"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>
<span class="icon-circle icon-circle-secondary"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>
<span class="icon-circle icon-circle-success"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>
<span class="icon-circle icon-circle-danger"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>
<span class="icon-circle icon-circle-warning"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>
<span class="icon-circle icon-circle-info"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>
<span class="icon-circle icon-circle-light"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>
<span class="icon-circle icon-circle-dark"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>
</span>

Sizes

Do you prefer larger or smaller circle icons? You can add .icon-circle-lg for a larger size or .icon-circle-sm for a smaller size.

html

<span class="icon-circle icon-circle-primary icon-circle-lg"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>

</span>
<span class="icon-circle icon-circle-secondary icon-circle-lg"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>

</span>

html

<span class="icon-circle icon-circle-primary icon-circle-sm"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>

</span>
<span class="icon-circle icon-circle-secondary icon-circle-sm"><svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>

</span>

You can even roll your own custom sizing with CSS variables:

html

<span class="icon-circle icon-circle-primary"
style="--bs-icon-circle-padding: 0.25rem; --bs-icon-circle-font-size: 1.5rem;">
<svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>


</span>

<span class="icon-circle icon-circle-primary"
style="--bs-icon-circle-padding: 1rem; --bs-icon-circle-font-size: 1.5rem;">
<svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#question-circle-fill"/>
</svg>


</span>

CSS

Variables

We use local CSS variables on .icon-circle for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

src/scss/_icons.scss

--#{$prefix}icon-circle-color: #{$icon-circle-color};
--#{$prefix}icon-circle-bg: transparent;
--#{$prefix}icon-circle-border-radius: 50%;
--#{$prefix}icon-circle-padding: max(var(--#{$prefix}icon-circle-padding-y), var(--#{$prefix}icon-circle-padding-x));
--#{$prefix}icon-circle-padding-x: #{$icon-circle-padding-x};
--#{$prefix}icon-circle-padding-y: #{$icon-circle-padding-y};

@include rfs($icon-circle-font-size, --#{$prefix}icon-circle-font-size);

Each .icon-circle-* modifier class updates the appropriate CSS variables to minimize additional CSS rules with our icon-circle-variant() and icon-circle-size() mixins.

Here’s an example of building a custom .icon-circle-* modifier class.

site/assets/scss/_icons.scss

.icon-circle-bd-primary {
  --bs-icon-circle-color: var(--bs-white);
  --bs-icon-circle-bg: var(--bd-ofi-color-bg);
  --bs-icon-circle-border-color: var(--bd-ofi-color-bg);
}

Sass variables

src/scss/_variables.scss

$icon-circle-color:                   var(--#{$prefix}body-color);
$icon-circle-padding-y:               $input-btn-padding-y;
$icon-circle-padding-x:               $input-btn-padding-x;
$icon-circle-font-size:               $font-size-base;

$icon-circle-padding-y-sm:            .25rem;
$icon-circle-padding-x-sm:            .5rem;
$icon-circle-font-size-sm:            $font-size-base * .875;

$icon-circle-padding-y-lg:            .5rem;
$icon-circle-padding-x-lg:            1rem;
$icon-circle-font-size-lg:            $font-size-base * 1.25;

Sass mixins

There are two mixins for icon circle: button based on $theme-colors, and a button size mixin.

src/scss/mixins/_icons.scss

@mixin icon-circle-variant(
  $background,
  $border,
  $color: color-contrast($background),
) {
  --#{$prefix}icon-circle-color: #{$color};
  --#{$prefix}icon-circle-bg: #{$background};
  --#{$prefix}icon-circle-border-color: #{$border};
}

src/scss/mixins/_icons.scss

@mixin icon-circle-size($padding-y, $padding-x, $font-size) {
  --#{$prefix}icon-circle-padding-y: #{$padding-y};
  --#{$prefix}icon-circle-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}icon-circle-font-size);
}

Sass loops

Rounded icon variants use their respective mixins with our $theme-colors map to generate the modifier classes in scss/_icons.scss.

src/scss/_icons.scss

@each $color, $value in $theme-colors {
  .icon-circle-#{$color} {
    @include icon-circle-variant($value, $value);
  }
}