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-circle
#shape-attention-plain
#shape-auto-reply
#shape-auto-reply2
#shape-birthday
#shape-blackfriday
#shape-blocked-content
#shape-bullet-points
#shape-burger
#shape-calendar
#shape-calendar-today
#shape-caret
#shape-caret-double-left
#shape-cc
#shape-check-circle
#shape-circle
#shape-chrome
#shape-clipboard
#shape-clock
#shape-close
#shape-compose
#shape-contact
#shape-contact-full
#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-globe
#shape-gmail
#shape-half-moon
#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-outbox
#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-protonaccount
#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-scheduled-box
#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-tor
#shape-tour
#shape-trash
#shape-tutorial
#shape-tutorial2
#shape-tv
#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-yahoo
#shape-youtube
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-24p" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#shape-twitter"></use>
</svg> 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).
input search
input search
(RTL)
select
summary
opened
indeterminate
checkbox
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).