Icons used in ProtonMail

List of all SVG sprites (square sprites)

Icons with a “native” viewbox of 16×16

#shape-account

#shape-add

#shape-address

#shape-addresses

#shape-address-add

#shape-address-disable

#shape-alias

#shape-all-emails

#shape-android

#shape-anniversary

#shape-apple

#shape-apparence

#shape-apps

#shape-archive

#shape-arrow-cross

#shape-arrow-double-horizontal

#shape-arrow-double-vertical

#shape-arrow-down

#shape-arrow-left

#shape-arrow-right

#shape-arrow-up

#shape-attach

#shape-attention

#shape-auto-reply

#shape-auto-reply2

#shape-birthday

#shape-blackfriday

#shape-blocked-content

#shape-bullet-points

#shape-burger

#shape-calendar

#shape-calendar-repeat

#shape-caret

#shape-cc

#shape-check-circle

#shape-circle

#shape-clipboard

#shape-clock

#shape-close

#shape-compose

#shape-contact

#shape-contact-add

#shape-contact-photo

#shape-contacts

#shape-contacts-group

#shape-contacts-group-people

#shape-contacts-groups

#shape-contacts-group-add

#shape-contract-window

#shape-copy

#shape-dashboard

#shape-date

#shape-decrypt

#shape-delete

#shape-domains

#shape-donate

#shape-download

#shape-drafts

#shape-email

#shape-email-address

#shape-empty-folder

#shape-empty-trash

#shape-encrypt

#shape-encrypted-contacts-book

#shape-expand

#shape-expiration

#shape-export

#shape-facebook

#shape-fax

#shape-file-doc

#shape-file-docx

#shape-file-edit

#shape-file-image

#shape-file-pdf

#shape-file-pot

#shape-file-ppt

#shape-file-pptx

#shape-file-rar-zip

#shape-file-unknown

#shape-file-upload

#shape-file-video

#shape-file-xliff

#shape-file-xls

#shape-file-xslx

#shape-file-xml

#shape-filter

#shape-folder

#shape-folder-label

#shape-folder-new

#shape-folder-upload

#shape-font-color

#shape-forward

#shape-gender

#shape-general

#shape-gift

#shape-github

#shape-help-answer

#shape-html-message

#shape-identity

#shape-imap-smtp

#shape-import

#shape-inbox

#shape-info

#shape-insert-image

#shape-instagram

#shape-key

#shape-keys

#shape-label

#shape-language

#shape-layout-columns

#shape-layout-columns2

#shape-layout-rows

#shape-layout-rows2

#shape-link

#shape-linkedin

#shape-linux

#shape-lock

#shape-lock-alone

#shape-lock-check

#shape-lock-warning

#shape-lock-write

#shape-mailbox

#shape-mailing-list

#shape-mastodon

#shape-member-contact

#shape-merge

#shape-message-templates

#shape-minimize

#shape-minus

#shape-mobile

#shape-mobile-add

#shape-more

#shape-nospam

#shape-note

#shape-note-add

#shape-notifications-disabled

#shape-notifications-enabled

#shape-off

#shape-on

#shape-ordered-list

#shape-organization

#shape-organization-users

#shape-parent-folder

#shape-payments

#shape-payments-type-amex

#shape-payments-type-bt

#shape-payments-type-card

#shape-payments-type-cash

#shape-payments-type-discover

#shape-payments-type-mastercard

#shape-payments-type-pp

#shape-payments-type-visa

#shape-pen

#shape-p2p

#shape-phishing

#shape-phone

#shape-plaintext-message

#shape-plus

#shape-pm-me

#shape-print

#shape-protoncalendar

#shape-protoncontacts

#shape-protondrive

#shape-protonmail

#shape-protonvpn

#shape-question

#shape-read

#shape-reddit

#shape-reload

#shape-remove-text-formatting

#shape-reply

#shape-reply-all

#shape-report-bug

#shape-role

#shape-save

#shape-search

#shape-security

#shape-selectall

#shape-sent

#shape-servers-country

#shape-settings

#shape-settings-master

#shape-settings-singular

#shape-shop

#shape-show-all-emails

#shape-sign-out

#shape-sort-large-small

#shape-sort-new-old

#shape-sort-old-new

#shape-sort-small-large

#shape-spam

#shape-speed-fast

#shape-speed-low

#shape-speed-medium

#shape-star

#shape-starfull

#shape-support1

#shape-support2

#shape-text-align-left

#shape-text-align-right

#shape-text-bold

#shape-target

#shape-text-center

#shape-text-font

#shape-text-italic

#shape-text-justify

#shape-text-quote

#shape-text-underline

#shape-timezone1

#shape-timezone2

#shape-title

#shape-trash

#shape-tutorial

#shape-tutorial2

#shape-twitter

#shape-unread

#shape-upgrade-to-paid

#shape-user-storage

#shape-view-headers

#shape-view-html-code

#shape-view-source-code

#shape-vpn-connx

#shape-what-is-this

#shape-windows

#shape-youtube

… to come

Warning: shape-lock-check, shape-lock-warning have color inside. The fill- classes applied to them will not change the part already colored.

Special cases (bank icons), with a “native” viewbox of 16×16

These ones have their own styles, so they should be used as simple classic images. you may specify width attribute on img tag if you want to display them larger:

Lock icons (`viewbox` 18×18)

#shape-locks-check

#shape-locks-closed

#shape-locks-signed

#shape-locks-warning

#shape-locks-open-check

#shape-locks-open-signed

#shape-locks-open-warning

Other viewboxes

Please document here icons with other native viewboxes.

Integration cases

Base code:

<svg viewBox="0 0 16 16" class="icon-16p" role="img" focusable="false">
  <use xlink:href="#shape-protonmail"></use>
</svg>

In viewBox attribute, specify “native” viewbox of the image.
In class attribute, specify the class name of the size you want it to be displayed (icon-16p, icon-100p, etc.).

Decorative images (not need for alternative)

Add aria-hidden="true" to the SVG, example:

<svg viewBox="0 0 16 16" class="icon-25p" role="img" aria-hidden="true" focusable="false">
  <use xlink:href="#shape-twitter"></use>
</svg> Our Twitter account

Our Twitter account

Images with information inside

Add aria-hidden="true" to the SVG and provide text using sr-only class, example:

<p>
  we like
  <svg viewBox="0 0 16 16" class="icon-25p" role="img" aria-hidden="true" focusable="false">
    <use xlink:href="#shape-twitter"></use>
  </svg>
  <span class="sr-only">Twitter</span>
</p>

We like Twitter

<svg> links or alone in buttons

<a href="https://twitter.com/ProtonMail">
  <svg viewBox="0 0 16 16" class="icon-25p" role="img" aria-labelledby="title-svg-icon-twitter" focusable="false">
    <title id="title-svg-icon-twitter">Our Twitter account</title>
    <use xlink:href="#shape-twitter"></use>
  </svg>
</a>

See some tests for icon display (responsive, IE, etc.).

Sizes, colors

List of all classes for coloring icons

fill-global-grey
fill-global-altgrey
fill-global-light
fill-global-border
fill-global-muted
fill-global-success
fill-global-warning
fill-global-attention
fill-pm-blue
fill-pm-blue-dark
fill-pm-blue-light
fill-pv-green
fill-pv-green-light
fill-pv-green-dark
fill-white
fill-currentColor

Add the class to the SVG, and maaagic:

<svg viewBox="0 0 16 16" class="icon-100p fill-global-success" role="img" focusable="false">
  <use xlink:href="#shape-twitter"></use>
</svg>

Note: fill-currentColor will fill the SVG using the currentColor value (the color of the text). Useful to get the icon the same color of the text, in a link for example.

How to use it at different sizes?

.icon-50 {
  display: inline-block;
  width: 50%;
  height: 50%;
}

.icon-25p {
  display: inline-block;
  width: 25px;
  height: 25px;
}

Other examples

<span class="inline-flex bg-global-success rounded50 p0-25">
  <svg viewBox="0 0 16 16" class="icon-16p mauto fill-global-light" aria-hidden="true" role="img" focusable="false">
    <use xlink:href="#shape-on"></use>
  </svg>
</span>

<span class="inline-flex bg-global-warning rounded50 p0-25">
  <svg viewBox="0 0 16 16" class="icon-16p mauto fill-global-light" aria-hidden="true" role="img" focusable="false">
    <use xlink:href="#shape-off"></use>
  </svg>
</span>

Bigger shape examples:

<span class="inline-flex bg-global-success rounded50 p0-25">
  <svg viewBox="0 0 16 16" class="icon-25p mauto path2x fill-global-light" aria-hidden="true" role="img" focusable="false">
    <use xlink:href="#shape-on"></use>
  </svg>
</span>

<span class="inline-flex bg-global-attention rounded50 p0-25">
  <svg viewBox="0 0 16 16" class="icon-25p m0-5 path2x fill-global-light" aria-hidden="true" role="img" focusable="false">
    <use xlink:href="#shape-off"></use>
  </svg>
</span>

Icons used only from CSS

Some icons are used by CSS for some special cases, they are in a separate sprite in assets/img/sprite-for-css-only.svg (and this sprite should only be used for these rares cases).

In input search

In input search (RTL)

In select

for summary opened

In breadcrumb domain

in indeterminate checkbox

in wizard component

to come

Please do use the Sass variable $path-images when using them. Before updating one, please check that it is not used for several cases (yes, this is the magic of SVG).