Example

.circled-icon-zzz-IoT-AP-circle:

.circled-icon-z_benefits_choose_your_device:

.circled-icon-z_benefits_drinks:

.circled-icon-z_benefits_flextime:

.circled-icon-z_benefits_homeoffice:

.circled-icon-z_benefits_team_building:

.circled-icon-z_development:

.circled-icon-z_framework:

.circled-icon-z_readiness:

.circled-icon-z_sidebar_social_instagram:

.circled-icon-z_values_career_path:

.circled-icon-zzz_consulting-circle:

.circled-icon-zzz_consulting:

.circled-icon-zzz_Digital-AP-circle:

.circled-icon-zzz_Digital-AP:

.circled-icon-zzz_EndtoEndProjects-circle:

.circled-icon-zzz_EndtoEndProjects:

.circled-icon-zzz_LiferaySupport-circle:

.circled-icon-zzz_LiferaySupport:

.circled-icon-zzz_OperationsandMaintenance-circle:

.circled-icon-zzz_OperationsandMaintenance:

.circled-icon-zzz_nearshoring:

.circled-icon-zzz_training-circle:

.circled-icon-zzz_training:

.circled-icon-zzz-IoT-AP:

.circled-icon-zzz-Nearshoring-circle:

Markup
<div class="demo-icons">
<p>.circled-icon-zzz-IoT-AP-circle: <i class="circled-icon-zzz-IoT-AP-circle"></i></p>
<p>.circled-icon-z_benefits_choose_your_device: <i class="circled-icon-z_benefits_choose_your_device"></i></p>
<p>.circled-icon-z_benefits_drinks: <i class="circled-icon-z_benefits_drinks"></i></p>
<p>.circled-icon-z_benefits_flextime: <i class="circled-icon-z_benefits_flextime"></i></p>
<p>.circled-icon-z_benefits_homeoffice: <i class="circled-icon-z_benefits_homeoffice"></i></p>
<p>.circled-icon-z_benefits_team_building: <i class="circled-icon-z_benefits_team_building"></i></p>
<p>.circled-icon-z_development: <i class="circled-icon-z_development"></i></p>
<p>.circled-icon-z_framework: <i class="circled-icon-z_framework"></i></p>
<p>.circled-icon-z_readiness: <i class="circled-icon-z_readiness"></i></p>
<p>.circled-icon-z_sidebar_social_instagram: <i class="circled-icon-z_sidebar_social_instagram"></i></p>
<p>.circled-icon-z_values_career_path: <i class="circled-icon-z_values_career_path"></i></p>
<p>.circled-icon-zzz_consulting-circle: <i class="circled-icon-zzz_consulting-circle"></i></p>
<p>.circled-icon-zzz_consulting: <i class="circled-icon-zzz_consulting"></i></p>
<p>.circled-icon-zzz_Digital-AP-circle: <i class="circled-icon-zzz_Digital-AP-circle"></i></p>
<p>.circled-icon-zzz_Digital-AP: <i class="circled-icon-zzz_Digital-AP"></i></p>
<p>.circled-icon-zzz_EndtoEndProjects-circle: <i class="circled-icon-zzz_EndtoEndProjects-circle"></i></p>
<p>.circled-icon-zzz_EndtoEndProjects: <i class="circled-icon-zzz_EndtoEndProjects"></i></p>
<p>.circled-icon-zzz_LiferaySupport-circle: <i class="circled-icon-zzz_LiferaySupport-circle"></i></p>
<p>.circled-icon-zzz_LiferaySupport: <i class="circled-icon-zzz_LiferaySupport"></i></p>
<p>.circled-icon-zzz_OperationsandMaintenance-circle: <i class="circled-icon-zzz_OperationsandMaintenance-circle"></i></p>
<p>.circled-icon-zzz_OperationsandMaintenance: <i class="circled-icon-zzz_OperationsandMaintenance"></i></p>
<p>.circled-icon-zzz_nearshoring: <i class="circled-icon-zzz_nearshoring"></i></p>
<p>.circled-icon-zzz_training-circle: <i class="circled-icon-zzz_training-circle"></i></p>
<p>.circled-icon-zzz_training: <i class="circled-icon-zzz_training"></i></p>
<p>.circled-icon-zzz-IoT-AP: <i class="circled-icon-zzz-IoT-AP"></i></p>
<p>.circled-icon-zzz-Nearshoring-circle: <i class="circled-icon-zzz-Nearshoring-circle"></i></p>
</div>
<style type="text/css">.demo-icons [class^="circled-icon-"]{font-size: 75px;vertical-align: middle;}</style>
Source: scss/components/circled-icons/_circled-icons.scss, line 1