Cumulocity

Cumulocity

Quickly find the icon you need. Cumulocity's custom icons based on iconmonstr.

Webfont

To use any of these icons, just add the proper css classes to any empty tag.

Use the same way as Font awesome. Change color and size trough css.

c8y-icon-accounts

c8y-icon-add-user

c8y-icon-administration

c8y-icon-alarm

c8y-icon-alert-idle

c8y-icon-analytic-model

c8y-icon-analytics-builder

c8y-icon-archive

c8y-icon-atom

c8y-icon-bulb

c8y-icon-business-rules

c8y-icon-c8y

c8y-icon-c8y-data

c8y-icon-c8y-support

c8y-icon-calendar

c8y-icon-chart

c8y-icon-cockpit

c8y-icon-connector-in

c8y-icon-connector-out

c8y-icon-data-broker

c8y-icon-data-explorer

c8y-icon-data-points

c8y-icon-device

c8y-icon-device-connect

c8y-icon-device-control

c8y-icon-device-management

c8y-icon-device-protocols

c8y-icon-energy

c8y-icon-enterprise

c8y-icon-event-processing

c8y-icon-events

c8y-icon-fieldbus

c8y-icon-find-map

c8y-icon-group

c8y-icon-group-add

c8y-icon-group-open

c8y-icon-group-remote

c8y-icon-group-remote-inactive

c8y-icon-group-remote-open

c8y-icon-group-smart

c8y-icon-group-smart-open

c8y-icon-java

c8y-icon-location

c8y-icon-management

c8y-icon-mobile-add

c8y-icon-mobile-config

c8y-icon-modules

c8y-icon-notification

c8y-icon-overviews

c8y-icon-parking

c8y-icon-report

c8y-icon-reports

c8y-icon-rocket

c8y-icon-saas

c8y-icon-security

c8y-icon-shield

c8y-icon-simulator

c8y-icon-smart-rest

c8y-icon-smart-rules

c8y-icon-sub-tenants

c8y-icon-tenant-policies

c8y-icon-tools

c8y-icon-tracking

c8y-icon-usage-statistics

c8y-icon-user

c8y-icon-users

c8y-icon-waste-bin
<!--use classes-->
    <i class="c8y-icon c8y-icon-administration"></i>
    <!-- or with c8y-icon directive-->
    <i c8y-icon="c8y-administration"></i>
  

Duocolor icons

Use the modifier class .c8y-icon-duocolor to use a richer 2 color version.

Although not a webfont, use it as you would with the regular version — to resize use font size.

Click on the icon to copy the css class name.

c8y-icon-accounts

c8y-icon-add-user

c8y-icon-administration

c8y-icon-alarm

c8y-icon-alert-idle

c8y-icon-analytic-model

c8y-icon-analytics-builder

c8y-icon-archive

c8y-icon-atom

c8y-icon-bulb

c8y-icon-business-rules

c8y-icon-c8y

c8y-icon-c8y-data

c8y-icon-c8y-support

c8y-icon-calendar

c8y-icon-chart

c8y-icon-cockpit

c8y-icon-connector-in

c8y-icon-connector-out

c8y-icon-data-broker

c8y-icon-data-explorer

c8y-icon-data-points

c8y-icon-device

c8y-icon-device-connect

c8y-icon-device-control

c8y-icon-device-management

c8y-icon-device-protocols

c8y-icon-energy

c8y-icon-enterprise

c8y-icon-event-processing

c8y-icon-events

c8y-icon-fieldbus

c8y-icon-find-map

c8y-icon-group

c8y-icon-group-add

c8y-icon-group-open

c8y-icon-group-remote

c8y-icon-group-remote-inactive

c8y-icon-group-remote-open

c8y-icon-group-smart

c8y-icon-group-smart-open

c8y-icon-java

c8y-icon-location

c8y-icon-management

c8y-icon-mobile-add

c8y-icon-mobile-config

c8y-icon-modules

c8y-icon-notification

c8y-icon-overviews

c8y-icon-parking

c8y-icon-report

c8y-icon-reports

c8y-icon-rocket

c8y-icon-saas

c8y-icon-security

c8y-icon-shield

c8y-icon-simulator

c8y-icon-smart-rest

c8y-icon-smart-rules

c8y-icon-sub-tenants

c8y-icon-tenant-policies

c8y-icon-tools

c8y-icon-tracking

c8y-icon-usage-statistics

c8y-icon-user

c8y-icon-users

c8y-icon-waste-bin
<!--use classes-->
    <i class="c8y-icon c8y-icon-duocolor c8y-icon-administration"></i>
    <!-- or with c8y-icon -->
    <i c8y-icon="c8y-administration c8y-icon-duocolor"></i>
  

Inverted duocolor icons

Add .c8y-icon-white to use over dark backgrounds.

c8y-icon-accounts

c8y-icon-add-user

c8y-icon-administration

c8y-icon-alarm

c8y-icon-alert-idle

c8y-icon-analytic-model

c8y-icon-analytics-builder

c8y-icon-archive

c8y-icon-atom

c8y-icon-bulb

c8y-icon-business-rules

c8y-icon-c8y

c8y-icon-c8y-data

c8y-icon-c8y-support

c8y-icon-calendar

c8y-icon-chart

c8y-icon-cockpit

c8y-icon-connector-in

c8y-icon-connector-out

c8y-icon-data-broker

c8y-icon-data-explorer

c8y-icon-data-points

c8y-icon-device

c8y-icon-device-connect

c8y-icon-device-control

c8y-icon-device-management

c8y-icon-device-protocols

c8y-icon-energy

c8y-icon-enterprise

c8y-icon-event-processing

c8y-icon-events

c8y-icon-fieldbus

c8y-icon-find-map

c8y-icon-group

c8y-icon-group-add

c8y-icon-group-open

c8y-icon-group-remote

c8y-icon-group-remote-inactive

c8y-icon-group-remote-open

c8y-icon-group-smart

c8y-icon-group-smart-open

c8y-icon-java

c8y-icon-location

c8y-icon-management

c8y-icon-mobile-add

c8y-icon-mobile-config

c8y-icon-modules

c8y-icon-notification

c8y-icon-overviews

c8y-icon-parking

c8y-icon-report

c8y-icon-reports

c8y-icon-rocket

c8y-icon-saas

c8y-icon-security

c8y-icon-shield

c8y-icon-simulator

c8y-icon-smart-rest

c8y-icon-smart-rules

c8y-icon-sub-tenants

c8y-icon-tenant-policies

c8y-icon-tools

c8y-icon-tracking

c8y-icon-usage-statistics

c8y-icon-user

c8y-icon-users

c8y-icon-waste-bin
<!--use classes-->
    <i class="c8y-icon c8y-icon-white c8y-icon-administration"></i>
    <!-- or with c8y-icon -->
    <i c8y-icon="c8y-administration c8y-icon-white"></i>