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 use the following code:

html

<i class="ofi-question-circle-fill"></i>

In this code, ofi- is a constant prefix. The part that comes after it, in this case question-circle-fill, represents the name of the icon. You can replace question-circle-fill with the name of any other icon you wish to use.

All icons

The list of all available icons is below:

arrows-fullscreen
calendar-fill
funnel-fill
translate
person-circle
x-lg
copy
envelope-fill
share
plus
dash
grid-fill
map-fill
list
at-fill
geo-alt-fill
telephone-fill
whatsapp
vimeo
youtube
tiktok
twitter
pinterest
linkedin
instagram
google
facebook
search
check-lg
clock-fill
people-fill
x-circle
star-fill
question-circle-fill
check-circle-fill
info-circle-fill
exclamation-triangle-fill
arrow-right
arrow-left
arrow-down
arrow-up
caret-down-fill
caret-left-fill
caret-right-fill
caret-up-fill
heart
heart-fill
cart-fill
link-external
qr-code

Circle icon

You can use the .icon-circle class along with a color variant modifier, such as .icon-circle-primary, to display a round icon with a colored background.

html

<span class="icon-circle icon-circle-primary"><i class="ofi-question-circle-fill"></i></span>

The .icon-circle class is intended to be used in conjunction with our icon circle variants, or to serve as a basis for your own custom styles.

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"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-secondary"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-success"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-danger"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-warning"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-info"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-light"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-dark"><i class="ofi-question-circle-fill"></i></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"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-secondary icon-circle-lg"><i class="ofi-question-circle-fill"></i></span>

html

<span class="icon-circle icon-circle-primary icon-circle-sm"><i class="ofi-question-circle-fill"></i></span>
<span class="icon-circle icon-circle-secondary icon-circle-sm"><i class="ofi-question-circle-fill"></i></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;">
<i class="ofi-question-circle-fill"></i>
</span>

<span class="icon-circle icon-circle-primary"
style="--bs-icon-circle-padding: 1rem; --bs-icon-circle-font-size: 1.5rem;">
<i class="ofi-question-circle-fill"></i>
</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);
  }
}