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-attention-plain
#shape-auto-reply
#shape-auto-reply2
#shape-birthday
#shape-blackfriday
#shape-blocked-content
#shape-bullet-points
#shape-burger
#shape-calendar
#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-txt
#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-pause
#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-question-nocircle
#shape-read
#shape-reddit
#shape-reload
#shape-remove-text-formatting
#shape-repeat
#shape-reply
#shape-reply-all
#shape-report-bug
#shape-resume
#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-swipe
#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.

Icons with a “native” viewbox of 24×24

#mime-default
#mime-folder
#mime-image
#mime-portable
#mime-text
… to come

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:

  • American Express
  • Dankort
  • Dinners Club
  • Discover
  • Forbrugs
  • JCB
  • Maestro
  • Mastercard
  • Paypal
  • UnionPay
  • VISA
  • VISA Electron

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>
  1. In viewBox attribute, specify “native” viewbox of the image.
  2. 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-24p" 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-24p" 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-24p" 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-24p {
  display: inline-block;
  width: 24px;
  height: 24px;
}

Other examples

<span class="inline-flex bg-global-success rounded50 p0-25">
  <svg viewBox="0 0 16 16" class="icon-16p mauto color-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 color-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-24p mauto path2x stroke-currentColor color-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-24p m0-5 path2x stroke-currentColor color-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 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).