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:

.icon-2020_sectors_business_process_automation:

.icon-2020_sectors_circle_business_process_automation:

.icon-2020_sectors_circle_conversational_banking:

.icon-2020_sectors_circle_customer_portals:

.icon-2020_sectors_circle_ebanking:

.icon-2020_sectors_circle_FDARegulatedApps:

.icon-2020_sectors_circle_IoMT:

.icon-2020_sectors_circle_Manufacturing_DigitalAfterSalesPlatforms:

.icon-2020_sectors_circle_online_appointment_management:

.icon-2020_sectors_circle_patient_portals:

.icon-2020_sectors_circle_public_sector:

.icon-2020_sectors_circle_retail:

.icon-2020_sectors_circle_telecommunications:

.icon-2020_sectors_conversational_banking:

.icon-2020_sectors_customer_portals:

.icon-2020_sectors_ebanking:

.icon-2020_sectors_FDARegulatedApps:

.icon-2020_sectors_IoMT:

.icon-2020_sectors_Manufacturing_DigitalAfterSalesPlatforms:

.icon-2020_sectors_online_appointment_management:

.icon-2020_sectors_patient_portals:

.icon-2020_sectors_public_sector:

.icon-2020_sectors_retail:

.icon-2020_sectors_telecommunications:

.icon-2020_whymimacom_circle_mimacom_customer_base:

.icon-2020_whymimacom_circle_mimacom_methodology:

.icon-2020_whymimacom_circle_mimacom_quality_certification:

.icon-2020_whymimacom_circle_mimacom_technology_stack:

.icon-2020_whymimacom_circle_technology_stack:

.icon-2020_whymimacom_mimacom_customer_base:

.icon-2020_whymimacom_mimacom_customer_staff:

.icon-2020_whymimacom_circle_mimacom_customer_staff:

.icon-2020_whymimacom_mimacom_methodology:

.icon-2020_whymimacom_mimacom_quality_certification:

.icon-2020_zz_sectors_Banking:

.icon-2020_zz_sectors_circle_Banking:

.icon-2020_zz_sectors_circle_Insurances:

.icon-2020_zz_sectors_circle_LifeSciences:

.icon-2020_zz_sectors_circle_Manufacturing:

.icon-2020_zz_sectors_consulting:

.icon-2020_zz_sectors_DigitalAcceleratorProgramm:

.icon-2020_zz_sectors_Insurances:

.icon-2020_zz_sectors_LifeSciences:

.icon-2020_zz_sectors_Manufacturing:

.icon-2020_zz_sectors_Software_Projects:

.icon-2020_zz_sectors_UXServices:

.icon-2020_zz1_sectors_circle_customer_experience:

.icon-2020_zz2_cirlce_digital_factory:

.icon-2020_zz3_sectors_cirlce_after_sales_process:

.icon-2020_zz4_sectors_cirlce_spareparts_management:

.icon-2020_zz5_sectors_circle_ioT_data:

.icon-2020_zz6_sectors_cirlce_integration_thirdparty_systems:

.icon-2020_zz7_sectors_customer_experience .path1:

.icon-2020_zz8_sectors_digital_factory:

.icon-2020_zz9_sectors_after_sales_process:

.icon-2020_zz10_sectors_spareparts_management:

.icon-2020_zz11_sectors_ioT_data:

.icon-2020_zz12_sectors_integration_thirdparty_systems:

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>
<p>.icon-2020_sectors_business_process_automation: <i class="icon-2020_sectors_business_process_automation"></i></p>
<p>.icon-2020_sectors_circle_business_process_automation: <i class="icon-2020_sectors_circle_business_process_automation"></i></p>
<p>.icon-2020_sectors_circle_conversational_banking: <i class="icon-2020_sectors_circle_conversational_banking"></i></p>
<p>.icon-2020_sectors_circle_customer_portals: <i class="icon-2020_sectors_circle_customer_portals"></i></p>
<p>.icon-2020_sectors_circle_ebanking: <i class="icon-2020_sectors_circle_ebanking"></i></p>
<p>.icon-2020_sectors_circle_FDARegulatedApps: <i class="icon-2020_sectors_circle_FDARegulatedApps"></i></p>
<p>.icon-2020_sectors_circle_IoMT: <i class="icon-2020_sectors_circle_IoMT"></i></p>
<p>.icon-2020_sectors_circle_Manufacturing_DigitalAfterSalesPlatforms: <i class="icon-2020_sectors_circle_Manufacturing_DigitalAfterSalesPlatforms"></i></p>
<p>.icon-2020_sectors_circle_online_appointment_management: <i class="icon-2020_sectors_circle_online_appointment_management"></i></p>
<p>.icon-2020_sectors_circle_patient_portals: <i class="icon-2020_sectors_circle_patient_portals"></i></p>
<p>.icon-2020_sectors_circle_public_sector: <i class="icon-2020_sectors_circle_public_sector"></i></p>
<p>.icon-2020_sectors_circle_retail: <i class="icon-2020_sectors_circle_retail"></i></p>
<p>.icon-2020_sectors_circle_telecommunications: <i class="icon-2020_sectors_circle_telecommunications"></i></p>
<p>.icon-2020_sectors_conversational_banking: <i class="icon-2020_sectors_conversational_banking"></i></p>
<p>.icon-2020_sectors_customer_portals: <i class="icon-2020_sectors_customer_portals"></i></p>
<p>.icon-2020_sectors_ebanking: <i class="icon-2020_sectors_ebanking"></i></p>
<p>.icon-2020_sectors_FDARegulatedApps: <i class="icon-2020_sectors_FDARegulatedApps"></i></p>
<p>.icon-2020_sectors_IoMT: <i class="icon-2020_sectors_IoMT"></i></p>
<p>.icon-2020_sectors_Manufacturing_DigitalAfterSalesPlatforms: <i class="icon-2020_sectors_Manufacturing_DigitalAfterSalesPlatforms"></i></p>
<p>.icon-2020_sectors_online_appointment_management: <i class="icon-2020_sectors_online_appointment_management"></i></p>
<p>.icon-2020_sectors_patient_portals: <i class="icon-2020_sectors_patient_portals"></i></p>
<p>.icon-2020_sectors_public_sector: <i class="icon-2020_sectors_public_sector"></i></p>
<p>.icon-2020_sectors_retail: <i class="icon-2020_sectors_retail"></i></p>
<p>.icon-2020_sectors_telecommunications: <i class="icon-2020_sectors_telecommunications"></i></p>
<p>.icon-2020_whymimacom_circle_mimacom_customer_base: <i class="icon-2020_whymimacom_circle_mimacom_customer_base"></i></p>
<p>.icon-2020_whymimacom_circle_mimacom_methodology: <i class="icon-2020_whymimacom_circle_mimacom_methodology"></i></p>
<p>.icon-2020_whymimacom_circle_mimacom_quality_certification: <i class="icon-2020_whymimacom_circle_mimacom_quality_certification"></i></p>
<p>.icon-2020_whymimacom_circle_mimacom_technology_stack: <i class="icon-2020_whymimacom_circle_mimacom_technology_stack"></i></p>
<p>.icon-2020_whymimacom_circle_technology_stack: <i class="icon-2020_whymimacom_circle_technology_stack"></i></p>
<p>.icon-2020_whymimacom_mimacom_customer_base: <i class="icon-2020_whymimacom_mimacom_customer_base"></i></p>
<p>.icon-2020_whymimacom_mimacom_customer_staff: <i class="icon-2020_whymimacom_mimacom_customer_staff"></i></p>
<p>.icon-2020_whymimacom_circle_mimacom_customer_staff: <i class="icon-2020_whymimacom_circle_mimacom_customer_staff"></i></p>
<p>.icon-2020_whymimacom_mimacom_methodology: <i class="icon-2020_whymimacom_mimacom_methodology"></i></p>
<p>.icon-2020_whymimacom_mimacom_quality_certification: <i class="icon-2020_whymimacom_mimacom_quality_certification"></i></p>
<p>.icon-2020_zz_sectors_Banking: <i class="icon-2020_zz_sectors_Banking"></i></p>
<p>.icon-2020_zz_sectors_circle_Banking: <i class="icon-2020_zz_sectors_circle_Banking"></i></p>
<p>.icon-2020_zz_sectors_circle_Insurances: <i class="icon-2020_zz_sectors_circle_Insurances"></i></p>
<p>.icon-2020_zz_sectors_circle_LifeSciences: <i class="icon-2020_zz_sectors_circle_LifeSciences"></i></p>
<p>.icon-2020_zz_sectors_circle_Manufacturing: <i class="icon-2020_zz_sectors_circle_Manufacturing"></i></p>
<p>.icon-2020_zz_sectors_consulting: <i class="icon-2020_zz_sectors_consulting"></i></p>
<p>.icon-2020_zz_sectors_DigitalAcceleratorProgramm: <i class="icon-2020_zz_sectors_DigitalAcceleratorProgramm"></i></p>
<p>.icon-2020_zz_sectors_Insurances: <i class="icon-2020_zz_sectors_Insurances"></i></p>
<p>.icon-2020_zz_sectors_LifeSciences: <i class="icon-2020_zz_sectors_LifeSciences"></i></p>
<p>.icon-2020_zz_sectors_Manufacturing: <i class="icon-2020_zz_sectors_Manufacturing"></i></p>
<p>.icon-2020_zz_sectors_Software_Projects: <i class="icon-2020_zz_sectors_Software_Projects"></i></p>
<p>.icon-2020_zz_sectors_UXServices: <i class="icon-2020_zz_sectors_UXServices"></i></p>
<p>.icon-2020_zz1_sectors_circle_customer_experience: <i class="icon-2020_zz1_sectors_circle_customer_experience"></i></p>
<p>.icon-2020_zz2_cirlce_digital_factory: <i class="icon-2020_zz2_cirlce_digital_factory"></i></p>
<p>.icon-2020_zz3_sectors_cirlce_after_sales_process: <i class="icon-2020_zz3_sectors_cirlce_after_sales_process"></i></p>
<p>.icon-2020_zz4_sectors_cirlce_spareparts_management: <i class="icon-2020_zz4_sectors_cirlce_spareparts_management"></i></p>
<p>.icon-2020_zz5_sectors_circle_ioT_data: <i class="icon-2020_zz5_sectors_circle_ioT_data"></i></p>
<p>.icon-2020_zz6_sectors_cirlce_integration_thirdparty_systems: <i class="icon-2020_zz6_sectors_cirlce_integration_thirdparty_systems"></i></p>
<p>.icon-2020_zz7_sectors_customer_experience .path1: <i class="icon-2020_zz7_sectors_customer_experience "></i></p>
<p>.icon-2020_zz8_sectors_digital_factory: <i class="icon-2020_zz8_sectors_digital_factory"></i></p>
<p>.icon-2020_zz9_sectors_after_sales_process: <i class="icon-2020_zz9_sectors_after_sales_process"></i></p>
<p>.icon-2020_zz10_sectors_spareparts_management: <i class="icon-2020_zz10_sectors_spareparts_management"></i></p>
<p>.icon-2020_zz11_sectors_ioT_data: <i class="icon-2020_zz11_sectors_ioT_data"></i></p>
<p>.icon-2020_zz12_sectors_integration_thirdparty_systems: <i class="icon-2020_zz12_sectors_integration_thirdparty_systems"></i></p>
</div>
<style type="text/css">.demo-icons [class^="circled-icon-"]{font-size: 75px;vertical-align: middle;}</style>
<style type="text/css">.demo-icons [class^="icon-2020_"]{font-size: 75px;vertical-align: middle;}</style>
Source: scss/components/circled-icons/_circled-icons.scss, line 1
Examples
Default styling
.text--mimacom
large icon
.text--techblue-light
extra large icon
Markup
<i class="circled-icon-zzz-IoT-AP-circle [modifier class]"></i>
<i class="circled-icon-zzz-IoT-AP-circle circled-icon--large [modifier class]"></i>
<i class="circled-icon-zzz-IoT-AP-circle circled-icon--xlarge [modifier class]"></i>
Source: scss/components/circled-icons/_circled-icons.scss, line 437
Examples
Default styling
.circled-icon--large
large icon
.circled-icon--xlarge
extra large icon
Markup
<i class="circled-icon-zzz_training-circle [modifier class]"></i>
Source: scss/components/circled-icons/_circled-icons.scss, line 417