Example

.circled-icon-BPM:

.circled-icon-BPM-vertical:

.circled-icon-Cloud-Native-Apps:

.circled-icon-Cloud-systems:

.circled-icon-Cloud-systems-vertical:

.circled-icon-Digital-Platforms-horizontal:

.circled-icon-Digital-Platforms-vertical:

.circled-icon-Enterprise-search:

.circled-icon-Mobile-Applications-horizontal:

.circled-icon-Mobile-Applications-vertical:

.circled-icon-Software-dev-and-implementation:

.circled-icon-digital-strategy-circle:

.circled-icon-line:

.circled-icon-link-arrow_hover:

.circled-icon-link-arrow_normal:

.circled-icon-link-arrow_normal-copia:

.circled-icon-menu_close_normal:

.circled-icon-menu_normal:

.circled-icon-operations-and-services:

.circled-icon-our-dna_01:

.circled-icon-our-dna_02:

.circled-icon-our-dna_03:

.circled-icon-our-dna_04:

.circled-icon-sidebar_blog:

.circled-icon-sidebar_blog-comic:

.circled-icon-sidebar_blog-comic-points:

.circled-icon-sidebar_chat:

.circled-icon-sidebar_mail:

.circled-icon-sidebar_offices-world:

.circled-icon-sidebar_offices_pin:

.circled-icon-sidebar_phone:

.circled-icon-sidebar_search:

.circled-icon-sidebar_social:

.circled-icon-sidebar_social_facebook:

.circled-icon-sidebar_social_linkedin:

.circled-icon-sidebar_social_twitter:

.circled-icon-solution-conception-and-design:

.circled-icon-transform-customer-experience_01:

.circled-icon-transform-customer-experience_02:

.circled-icon-transform-customer-experience_03:

.circled-icon-transform-customer-experience_04:

.circled-icon-z_analytics:

.circled-icon-z_audit:

.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_know_how:

.circled-icon-z_liferay_as_product:

.circled-icon-z_readiness:

.circled-icon-z_sidebar_social_instagram:

.circled-icon-z_values_career_path:

.circled-icon-z_workshop:

.circled-icon-zz_machine-learning:

.circled-icon-zzz-IoT-AP:

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

.circled-icon-zzz-Nearshoring-circle:

.circled-icon-zzz_Digital-AP:

.circled-icon-zzz_Digital-AP-circle:

.circled-icon-zzz_EndtoEndProjects:

.circled-icon-zzz_EndtoEndProjects-circle:

.circled-icon-zzz_LiferaySupport:

.circled-icon-zzz_LiferaySupport-circle:

.circled-icon-zzz_OperationsandMaintenance:

.circled-icon-zzz_OperationsandMaintenance-circle:

.circled-icon-zzz_consulting:

.circled-icon-zzz_consulting-circle:

.circled-icon-zzz_nearshoring:

.circled-icon-zzz_training:

.circled-icon-zzz_training-circle:

Markup
<div class="demo-icons">
<p>.circled-icon-BPM: <i class="circled-icon-BPM"></i></p>
<p>.circled-icon-BPM-vertical: <i class="circled-icon-BPM-vertical"></i></p>
<p>.circled-icon-Cloud-Native-Apps: <i class="circled-icon-Cloud-Native-Apps"></i></p>
<p>.circled-icon-Cloud-systems: <i class="circled-icon-Cloud-systems"></i></p>
<p>.circled-icon-Cloud-systems-vertical: <i class="circled-icon-Cloud-systems-vertical"></i></p>
<p>.circled-icon-Digital-Platforms-horizontal: <i class="circled-icon-Digital-Platforms-horizontal"></i></p>
<p>.circled-icon-Digital-Platforms-vertical: <i class="circled-icon-Digital-Platforms-vertical"></i></p>
<p>.circled-icon-Enterprise-search: <i class="circled-icon-Enterprise-search"></i></p>
<p>.circled-icon-Mobile-Applications-horizontal: <i class="circled-icon-Mobile-Applications-horizontal"></i></p>
<p>.circled-icon-Mobile-Applications-vertical: <i class="circled-icon-Mobile-Applications-vertical"></i></p>
<p>.circled-icon-Software-dev-and-implementation: <i class="circled-icon-Software-dev-and-implementation"></i></p>
<p>.circled-icon-digital-strategy-circle: <i class="circled-icon-digital-strategy-circle"></i></p>
<p>.circled-icon-line: <i class="circled-icon-line"></i></p>
<p>.circled-icon-link-arrow_hover: <i class="circled-icon-link-arrow_hover"></i></p>
<p>.circled-icon-link-arrow_normal: <i class="circled-icon-link-arrow_normal"></i></p>
<p>.circled-icon-link-arrow_normal-copia: <i class="circled-icon-link-arrow_normal-copia"></i></p>
<p>.circled-icon-menu_close_normal: <i class="circled-icon-menu_close_normal"></i></p>
<p>.circled-icon-menu_normal: <i class="circled-icon-menu_normal"></i></p>
<p>.circled-icon-operations-and-services: <i class="circled-icon-operations-and-services"></i></p>
<p>.circled-icon-our-dna_01: <i class="circled-icon-our-dna_01"></i></p>
<p>.circled-icon-our-dna_02: <i class="circled-icon-our-dna_02"></i></p>
<p>.circled-icon-our-dna_03: <i class="circled-icon-our-dna_03"></i></p>
<p>.circled-icon-our-dna_04: <i class="circled-icon-our-dna_04"></i></p>
<p>.circled-icon-sidebar_blog: <i class="circled-icon-sidebar_blog"></i></p>
<p>.circled-icon-sidebar_blog-comic: <i class="circled-icon-sidebar_blog-comic"></i></p>
<p>.circled-icon-sidebar_blog-comic-points: <i class="circled-icon-sidebar_blog-comic-points"></i></p>
<p>.circled-icon-sidebar_chat: <i class="circled-icon-sidebar_chat"></i></p>
<p>.circled-icon-sidebar_mail: <i class="circled-icon-sidebar_mail"></i></p>
<p>.circled-icon-sidebar_offices-world: <i class="circled-icon-sidebar_offices-world"></i></p>
<p>.circled-icon-sidebar_offices_pin: <i class="circled-icon-sidebar_offices_pin"></i></p>
<p>.circled-icon-sidebar_phone: <i class="circled-icon-sidebar_phone"></i></p>
<p>.circled-icon-sidebar_search: <i class="circled-icon-sidebar_search"></i></p>
<p>.circled-icon-sidebar_social: <i class="circled-icon-sidebar_social"></i></p>
<p>.circled-icon-sidebar_social_facebook: <i class="circled-icon-sidebar_social_facebook"></i></p>
<p>.circled-icon-sidebar_social_linkedin: <i class="circled-icon-sidebar_social_linkedin"></i></p>
<p>.circled-icon-sidebar_social_twitter: <i class="circled-icon-sidebar_social_twitter"></i></p>
<p>.circled-icon-solution-conception-and-design: <i class="circled-icon-solution-conception-and-design"></i></p>
<p>.circled-icon-transform-customer-experience_01: <i class="circled-icon-transform-customer-experience_01"></i></p>
<p>.circled-icon-transform-customer-experience_02: <i class="circled-icon-transform-customer-experience_02"></i></p>
<p>.circled-icon-transform-customer-experience_03: <i class="circled-icon-transform-customer-experience_03"></i></p>
<p>.circled-icon-transform-customer-experience_04: <i class="circled-icon-transform-customer-experience_04"></i></p>
<p>.circled-icon-z_analytics: <i class="circled-icon-z_analytics"></i></p>
<p>.circled-icon-z_audit: <i class="circled-icon-z_audit"></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_know_how: <i class="circled-icon-z_know_how"></i></p>
<p>.circled-icon-z_liferay_as_product: <i class="circled-icon-z_liferay_as_product"></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-z_workshop: <i class="circled-icon-z_workshop"></i></p>
<p>.circled-icon-zz_machine-learning: <i class="circled-icon-zz_machine-learning"></i></p>
<p>.circled-icon-zzz-IoT-AP: <i class="circled-icon-zzz-IoT-AP"></i></p>
<p>.circled-icon-zzz-IoT-AP-circle: <i class="circled-icon-zzz-IoT-AP-circle"></i></p>
<p>.circled-icon-zzz-Nearshoring-circle: <i class="circled-icon-zzz-Nearshoring-circle"></i></p>
<p>.circled-icon-zzz_Digital-AP: <i class="circled-icon-zzz_Digital-AP"></i></p>
<p>.circled-icon-zzz_Digital-AP-circle: <i class="circled-icon-zzz_Digital-AP-circle"></i></p>
<p>.circled-icon-zzz_EndtoEndProjects: <i class="circled-icon-zzz_EndtoEndProjects"></i></p>
<p>.circled-icon-zzz_EndtoEndProjects-circle: <i class="circled-icon-zzz_EndtoEndProjects-circle"></i></p>
<p>.circled-icon-zzz_LiferaySupport: <i class="circled-icon-zzz_LiferaySupport"></i></p>
<p>.circled-icon-zzz_LiferaySupport-circle: <i class="circled-icon-zzz_LiferaySupport-circle"></i></p>
<p>.circled-icon-zzz_OperationsandMaintenance: <i class="circled-icon-zzz_OperationsandMaintenance"></i></p>
<p>.circled-icon-zzz_OperationsandMaintenance-circle: <i class="circled-icon-zzz_OperationsandMaintenance-circle"></i></p>
<p>.circled-icon-zzz_consulting: <i class="circled-icon-zzz_consulting"></i></p>
<p>.circled-icon-zzz_consulting-circle: <i class="circled-icon-zzz_consulting-circle"></i></p>
<p>.circled-icon-zzz_nearshoring: <i class="circled-icon-zzz_nearshoring"></i></p>
<p>.circled-icon-zzz_training: <i class="circled-icon-zzz_training"></i></p>
<p>.circled-icon-zzz_training-circle: <i class="circled-icon-zzz_training-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