Skip to content

Icons

We provide visual context with icons, we want to emphasize the most important interactions. Our objective is to enhance usability.

Use

When using icons add this code below, specify the selected icon `svg identifier` and if needed customize your CSS accordingly:

1
2
3
<svg class="ez-icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
</svg>

Small icons

Add class `ez-icon--small` to modify an icon to its smallest size.

1
2
3
<svg class="ez-icon ez-icon--small">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
</svg>

Small-Medium icons

Add class `ez-icon--small-medium` to modify an icon to its second smallest size.

1
2
3
<svg class="ez-icon ez-icon--small-medium">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
</svg>

Medium icons

Add class `ez-icon--medium` to modify an icon to its medium size.

1
2
3
<svg class="ez-icon ez-icon--medium">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
</svg>

Large icons

Add class `ez-icon--large` to modify an icon to its large size.

1
2
3
<svg class="ez-icon ez-icon--large">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
</svg>

Extra Large icons

Add class `ez-icon--extra-large` to modify an icon to its largest size.

1
2
3
<svg class="ez-icon ez-icon--extra-large">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
</svg>

Colored icons - dark

Add class `ez-icon--dark` to modify the color fill of an icon to the Sass variable defined for white, `$ez-black`.
[[code_example {html} code_example]]

Colored icons - white

Add class `ez-icon--light` to modify the color fill of an icon to the Sass variable defined for white, `$ez-white`.
[[code_example {html} code_example]]

Note

We have used here a button as an example. If you want to dig more into buttons check Buttons component.

Colored icons - secondary

Add class `ez-icon--secondary` to modify the color fill of an icon to the Sass variable defined for secondary color, `$ez-color-secondary`.

1
2
3
<svg class="ez-icon ez-icon--secondary">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../ez-icons.svg#publish"></use>
</svg>

Icon set

Here you can find all SVG icons our CMS uses classified by categories:

General

about-info

about

airtime

approved

archive-restore

assign-section

assign-user

author

back

back-current-date

banner

block-add

block-invisible

block-visible-recurring

block-visible

bookmark-active

bookmark-manager

bookmark

browse

bubbles

caret-back

caret-down

caret-next

caret-up

caret-expanded

category

checkmark

circle-caret-down

circle-caret-left

circle-caret-right

circle-caret-up

circle-close

circle-create

clipboard

column-one

column-two

comment

content-draft

content-tree

content-type

content-type-group

copy

copy-subtree

create-content

create

dashboard

discard

download

drag

edit

embed

error

fields

file-text

file-video

file

filters

filters-funnel

focus

folder-empty

folder

form-data

form

future-publication

go-to-root

go-up

history

home-page

information

keyword

landing_page

landingpage-add

landingpage-preview

languages-add

languages

layout-switch

location-add-new

lock-unlock

lock

logout

maform

merge

move

notice

object-state

open-newtab

open-sametab

options

panels

pdf-file

personalize-block

personalize-content

personalize

pin-unpin

pin

portfolio

previewed

profile

publish-later-cancel

publish-later

publish

refresh

rejected

relations

restore-parent

restore

review

roles

rss

save

schedule

search

sections

send-review

settings-block

settings-config

sites-all

spinner

stats

swap

system-information

tags

tastes

timeline

trash-empty

trash-notrashed

trash-send

trash

unarchive

unpublish-hide

unpublish-reveal

upload

user

user_group

users-personalization

users-select

version-compare-action

version-compare

versions

view-custom

view-desktop

view-grid

view-hide

view-list

view-mobile

view-tablet

view

wand

warning

workflow

Content types

about

article

blog_post

blog

contentlist

folder

gallery

image

landing_page

media

news

place

places

product_list

product

wiki-file

wiki

Rich Text Editor

align-center

align-justify

align-left

align-right

bold

custom_tags

h1

h2

h3

h4

h5

h6

image-center

image-left

image-right

italic

link-anchor

link-content

link-remove

link

list-numbered

list

markup

paragraph-add

paragraph

quote

strikethrough

subscript

superscript

table-add

table-cell

table-column

table-row

tag

twitter

underscore

Form Builder

button

captcha

checkbox-multiple

checkbox

date

dropdown

input-hidden

input-line-multiple

input-line

input-number

radio-button-multiple

radio-button

rate

eCommerce

b2b

bestseller

cart-upload

cart-wishlist

cart

catalog

components

core

customer

erp

mail

newsletter

order-management

price

rate-review

server

slider-lastviewed

slider

Note

Following our design principles and philosophy, expandable and flexible, we provide a few more icons than the ones we are using so that you and your team have the option of customizing your eZ Platform CMS.