Example

.icon-BPM:

.icon-BPM-vertical:

.icon-cloud-native-apps:

.icon-cloud-systems:

.icon-cloud-systems-vertical:

.icon-digital-platforms-long:

.icon-digital-platforms-small:

.icon-digital-platforms-horizontal:

.icon-digital-platforms-vertical:

.icon-digital-strategy-circle:

.icon-enterprise-search:

.icon-line:

.icon-link-arrow_hover:

.icon-link-arrow_normal:

.icon-link-arrow:

.icon-menu_close_normal:

.icon-menu_normal:

.icon-mobile-applications:

.icon-mobile-applications-horizontal:

.icon-mobile-applications-vertical:

.icon-operations-and-services:

.icon-our-dna_01:

.icon-our-dna_02:

.icon-our-dna_03:

.icon-our-dna_04:

.icon-mimacom_zz_machine-learning:

.icon-sidebar_blog-comic-points:

.icon-sidebar_blog-comic:

.icon-sidebar_blog:

.icon-sidebar_chat:

.icon-sidebar_mail:

.icon-sidebar_phone:

.icon-sidebar_offices-world:

.icon-sidebar_offices_pin:

.icon-sidebar_search:

.icon-sidebar_social:

.icon-sidebar_social_facebook:

.icon-sidebar_social_linkedin:

.icon-sidebar_social_twitter:

.icon-software-dev-and-implementation:

.icon-solution-conception-and-design:

.icon-transform-customer-experience_01:

.icon-transform-customer-experience_02:

.icon-transform-customer-experience_03:

.icon-transform-customer-experience_04:

Markup
<div class="demo-icons">
<p>.icon-BPM: <i class="icon-BPM"></i></p>
<p>.icon-BPM-vertical: <i class="icon-BPM-vertical"></i></p>
<p>.icon-cloud-native-apps: <i class="icon-cloud-native-apps"></i></p>
<p>.icon-cloud-systems: <i class="icon-cloud-systems"></i></p>
<p>.icon-cloud-systems-vertical: <i class="icon-cloud-systems-vertical"></i></p>
<p>.icon-digital-platforms-long: <i class="icon-digital-platforms-long"></i></p>
<p>.icon-digital-platforms-small: <i class="icon-digital-platforms-small"></i></p>
<p>.icon-digital-platforms-horizontal: <i class="icon-digital-platforms-horizontal"></i></p>
<p>.icon-digital-platforms-vertical: <i class="icon-digital-platforms-vertical"></i></p>
<p>.icon-digital-strategy-circle: <i class="icon-digital-strategy-circle"></i></p>
<p>.icon-enterprise-search: <i class="icon-enterprise-search"></i></p>
<p>.icon-line: <i class="icon-line"></i></p>
<p>.icon-link-arrow_hover: <i class="icon-link-arrow_hover"></i></p>
<p>.icon-link-arrow_normal: <i class="icon-link-arrow_normal"></i></p>
<p>.icon-link-arrow: <i class="icon-link-arrow"></i></p>
<p>.icon-menu_close_normal: <i class="icon-menu_close_normal"></i></p>
<p>.icon-menu_normal: <i class="icon-menu_normal"></i></p>
<p>.icon-mobile-applications: <i class="icon-mobile-applications"></i></p>
<p>.icon-mobile-applications-horizontal: <i class="icon-mobile-applications-horizontal"></i></p>
<p>.icon-mobile-applications-vertical: <i class="icon-mobile-applications-vertical"></i></p>
<p>.icon-operations-and-services: <i class="icon-operations-and-services"></i></p>
<p>.icon-our-dna_01: <i class="icon-our-dna_01"></i></p>
<p>.icon-our-dna_02: <i class="icon-our-dna_02"></i></p>
<p>.icon-our-dna_03: <i class="icon-our-dna_03"></i></p>
<p>.icon-our-dna_04: <i class="icon-our-dna_04"></i></p>
<p>.icon-mimacom_zz_machine-learning: <i class="icon-mimacom_zz_machine-learning"></i></p>
<p>.icon-sidebar_blog-comic-points: <i class="icon-sidebar_blog-comic-points"></i></p>
<p>.icon-sidebar_blog-comic: <i class="icon-sidebar_blog-comic"></i></p>
<p>.icon-sidebar_blog: <i class="icon-sidebar_blog"></i></p>
<p>.icon-sidebar_chat: <i class="icon-sidebar_chat"></i></p>
<p>.icon-sidebar_mail: <i class="icon-sidebar_mail"></i></p>
<p>.icon-sidebar_phone: <i class="icon-sidebar_phone"></i></p>
<p>.icon-sidebar_offices-world: <i class="icon-sidebar_offices-world"></i></p>
<p>.icon-sidebar_offices_pin: <i class="icon-sidebar_offices_pin"></i></p>
<p>.icon-sidebar_search: <i class="icon-sidebar_search"></i></p>
<p>.icon-sidebar_social: <i class="icon-sidebar_social"></i></p>
<p>.icon-sidebar_social_facebook: <i class="icon-sidebar_social_facebook"></i></p>
<p>.icon-sidebar_social_linkedin: <i class="icon-sidebar_social_linkedin"></i></p>
<p>.icon-sidebar_social_twitter: <i class="icon-sidebar_social_twitter"></i></p>
<p>.icon-software-dev-and-implementation: <i class="icon-software-dev-and-implementation"></i></p>
<p>.icon-solution-conception-and-design: <i class="icon-solution-conception-and-design"></i></p>
<p>.icon-transform-customer-experience_01: <i class="icon-transform-customer-experience_01"></i></p>
<p>.icon-transform-customer-experience_02: <i class="icon-transform-customer-experience_02"></i></p>
<p>.icon-transform-customer-experience_03: <i class="icon-transform-customer-experience_03"></i></p>
<p>.icon-transform-customer-experience_04: <i class="icon-transform-customer-experience_04"></i></p>
</div>
<style type="text/css">.demo-icons [class^="icon-"]{font-size: 75px;vertical-align: middle;}</style>
Source: scss/components/icons/_icons.scss, line 1
Examples
Default styling
.text--mimacom
large icon
.text--techblue-light
extra large icon
Markup
<i class="circled-icon-BPM circled-icon--xlarge [modifier class]"></i>
Source: scss/components/icons/_icons.scss, line 260
Examples
Default styling
.text--mimacom
large icon
.text--techblue-light
extra large icon
Markup
<i class="circled-icon-BPM circled-icon--xlarge [modifier class]"></i>
Source: scss/components/circled-icons/_circled-icons.scss, line 173
Examples
Default styling
.icon--large
large icon
.icon--xlarge
extra large icon
Markup
<i class="circled-icon-BPM [modifier class]"></i>
Source: scss/components/icons/_icons.scss, line 240
Examples
Default styling
.circled-icon--large
large icon
.circled-icon--xlarge
extra large icon
Markup
<i class="circled-icon-BPM [modifier class]"></i>
Source: scss/components/circled-icons/_circled-icons.scss, line 153