Kaizen Icons
Available icons
kzicon-actions-calendar
kzicon-alert
kzicon-alert-info
kzicon-archive
kzicon-arrow-double-right
kzicon-arrow-down
kzicon-arrow-left
kzicon-arrow-right
kzicon-arrow-top
kzicon-atmark
kzicon-bell
kzicon-bell-circle
kzicon-blind
kzicon-bookmark
kzicon-building
kzicon-building-small
kzicon-calendar
kzicon-calendar2
kzicon-cancel
kzicon-caret-down
kzicon-caret-up
kzicon-caret-up-down
kzicon-cart
kzicon-chart
kzicon-chat
kzicon-check
kzicon-clip
kzicon-clone
kzicon-coin1
kzicon-coin2
kzicon-conversions
kzicon-creative
kzicon-credit-card
kzicon-crown
kzicon-customer
kzicon-cvr
kzicon-delete-circle
kzicon-desktop
kzicon-diagonal-arrow
kzicon-diagonal-line
kzicon-dialog-counter
kzicon-down
kzicon-download
kzicon-enter
kzicon-experiments
kzicon-file-default
kzicon-file-image
kzicon-file-sheet
kzicon-file-text
kzicon-gear
kzicon-goal
kzicon-goal-click
kzicon-goal-event
kzicon-goal-page_visit
kzicon-goal-transaction
kzicon-graph-small
kzicon-heart
kzicon-help-tip
kzicon-help-tip-circle
kzicon-info
kzicon-info-02
kzicon-kaizen-icon1
kzicon-kaizen-icon2
kzicon-kaizen-icon3
kzicon-left
kzicon-left-text
kzicon-less-text
kzicon-link
kzicon-list
kzicon-lock-off
kzicon-lock-on
kzicon-magnifier
kzicon-market
kzicon-marketplace
kzicon-message
kzicon-message-empty
kzicon-minus
kzicon-mobile
kzicon-mobile-menu
kzicon-new-window
kzicon-node
kzicon-notifications
kzicon-optimizer
kzicon-organization
kzicon-palette
kzicon-pause
kzicon-pencil
kzicon-phone
kzicon-play
kzicon-plus
kzicon-plus-02
kzicon-profile
kzicon-profile-circle
kzicon-project-type-display-popup
kzicon-project-type-redirect-test
kzicon-project-type-replace-image
kzicon-project-type-single-page-test
kzicon-remove-circle
kzicon-right
kzicon-right-text
kzicon-round
kzicon-round-arrow-left
kzicon-round-arrow-right
kzicon-send
kzicon-settings
kzicon-settings-basic
kzicon-settings-small
kzicon-sign-out
kzicon-spark
kzicon-specialized-experiments
kzicon-specialized-optimizer
kzicon-star
kzicon-statistic
kzicon-support
kzicon-tag
kzicon-tag-circle
kzicon-team
kzicon-team-settings
kzicon-text
kzicon-token-1
kzicon-token-2
kzicon-token-3
kzicon-token-4
kzicon-tooltip
kzicon-trash-bin-01
kzicon-trash-bin-02
kzicon-trophy
kzicon-truncated-arrow
kzicon-up
kzicon-upload
kzicon-user-chat
kzicon-user-favorite
kzicon-user-plus
kzicon-user-special
kzicon-variation-negative
kzicon-variation-neutral
kzicon-variation-positive
kzicon-variations-01
kzicon-variations-02
kzicon-watch
kzicon-wrench
kzicon-wrench-small
How to use
You can place icons just about anywhere using the CSS Prefix kzicon and the icon's name.
These icons are designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).
kzicon-arrow-down
i.kzicon.kzicon-arrow-down aria-hidden="true"
| kzicon-arrow-down
<i class="kzicon kzicon-arrow-down" aria-hidden="true"></i>kzicon-arrow-down
Sizes
The default size of every icons is 40x40 px.
i.kzicon.kzicon-arrow-down.debug aria-hidden="true"
<i class="kzicon kzicon-arrow-down debug" aria-hidden="true"></i>
Smaller and larger icons
To create smaller or larger icons, you can use the .kzicon--large or .kzicon--small classes.
kzicon--small (30x30)
defalut size (40x40)
kzicon--large (50x50)
p
i.kzicon.kzicon-arrow-down.kzicon--small.debug aria-hidden="true"
| kzicon--small (30x30)
p
i.kzicon.kzicon-arrow-down.debug aria-hidden="true"
| defalut size (40x40)
p
i.kzicon.kzicon-arrow-down.kzicon--large.debug aria-hidden="true"
| kzicon--large (50x50)
<p>
<i class="kzicon kzicon-arrow-down kzicon--small debug" aria-hidden="true"></i> kzicon--small (30x30)
</p>
<p>
<i class="kzicon kzicon-arrow-down debug" aria-hidden="true"></i> defalut size (40x40)
</p>
<p>
<i class="kzicon kzicon-arrow-down kzicon--large debug" aria-hidden="true"></i> kzicon--large (50x50)
</p>
Flexible sizes
We set font-size: 40px to the .kzicon class, so icon sizes don't change relatively to their container. If you want to change icon sizes more flexibly, add your custom class to the icon.
scss:
.custom-huge-icon {
font-size: 126px;
}
i.kzicon.kzicon-arrow-down.kzicon.custom-huge-icon aria-hidden="true"
<style type="text/css">
.custom-huge-icon {
font-size: 126px;
}
</style>
<i class="kzicon kzicon-arrow-down kzicon custom-huge-icon" aria-hidden="true"></i>Spinning icons
Add the kzicon-spin class to get any icon to rotate.
p
i.kzicon.kzicon-round-arrow-right.kzicon-spin
i.kzicon.kzicon-gear.kzicon-spin
<p>
<i class="kzicon kzicon-round-arrow-right kzicon-spin"></i><i class="kzicon kzicon-gear kzicon-spin"></i>
</p>
