Scouticons

Icons

Help Scout logo - white

Clean

Help Scout logo - white

Clear

Help Scout logo - white

Consistent


Content Area

All Scouticons are built on a 24px grid. In order to maintain visual consistency, they should be positioned within the grid in a congruent way. There are two main sizes of icons, Primary and Navigation, each with a designated content area. As a general rule, icons should never exceed the boundaries of the content area.

Help Scout logo - white

24px Grid

Help Scout logo - white

Primary Content Area

Help Scout logo - white

Navigation Content Area


Keyline

The keylines provided are a necessary constraint to maintain visual consistency. Each icon should align with these core shapes.

Primary

Help Scout logo - white

Primary Square

Help Scout logo - white

Primary Rectangle

Help Scout logo - white

Primary Circle

Help Scout logo - white

Navigation Square

Help Scout logo - white

Navigation Rectangle


Stroke, Corner Radius and Spacing

Stylistic consistency is key to a cohesive icon family. Follow these guidelines to avoid any standouts.

Help Scout logo - white

Stroke

One of the key defining elements of Scouticons is the consistent 2px stroke width. Each icon must maintain this element.

Help Scout logo - white

Corner Radius

There are three acceptable values to use for a corner radius in a rectangular shape: 0px, 1px, and 2px.

Help Scout logo - white

Spacing

Space between strokes should be 2px or more. Avoid spaces less than 2px, and stroke proximity that forms a solid shape.


Optical Corrections and Anomalies

It is critical to follow each of these guidelines; however, there may be a few rare instances when a shape requires an exemption from the rules to maintain legibility, especially at small sizes. In these extreme scenarios, use your absolute best judgement in determining if the exemption is necessary, and if the icon still belongs in the family.

Examples of anomalies

Help Scout logo - white

Abnormal Height

This icon for features settings would lose it's form if scaled vertically.

Help Scout logo - white

Abnormal Stroke

This small icon is displayed with preview copy, and must be legible at a small scale.

Help Scout logo - white

Exceeding Keyline

When including a "+", an icon may exceed the keyline boundary.


Best Practices

Help Scout logo - white

Do

Use rounded corners, consistent curves.

Help Scout logo - white

Don't

Use sharp corners

Help Scout logo - white

Don't

Use excessive curves

Help Scout logo - white

Do

Use 2px strokes

Help Scout logo - white

Don't

Use alternate stroke widths

Help Scout logo - white

Don't

Fill shapes

Help Scout logo - white

Do

Balance detail and negative space.

Help Scout logo - white

Don't

Use excessive detail

Help Scout logo - white

Don't

Use vague shapes


General Icons

.icon-alert
.icon-archive
.icon-avatar-cross
.icon-avatar
.icon-avatar-add
.icon-avatar-bdr
.icon-avatar-check
.icon-avatar-lg
.icon-back
.icon-bell
.icon-book
.icon-bcc
.icon-calendar
.icon-camera
.icon-chat
.icon-chat-sm
.icon-check
.icon-clock-sm
.icon-cloud
.icon-connection
.icon-convo-check
.icon-copy
.icon-create
.icon-custom-fields
.icon-doc
.icon-doc-arrow
.icon-doc-insert
.icon-dot
.icon-email
.icon-email-sm
.icon-envelope-message
.icon-envelope
.icon-eye
.icon-eye-closed
.icon-features
.icon-folder-check
.icon-folder-closed
.icon-gear-stop
.icon-hand
.icon-help
.icon-hide-keyboard
.icon-history
.icon-hours
.icon-hs-mark
.icon-import
.icon-info
.icon-key
.icon-lock
.icon-lock-sm
.icon-mailbox
.icon-mention
.icon-menu
.icon-menu-vertical
.icon-meter
.icon-moon
.icon-more
.icon-move
.icon-new-window
.icon-password
.icon-pencil
.icon-phone
.icon-phone-sm
.icon-pie
.icon-power
.icon-print
.icon-new-window
.icon-redirect
.icon-search
.icon-search-md
.icon-search-sm
.icon-select-all
.icon-square-check
.icon-store
.icon-translate
.icon-trophy
.icon-unlock
.icon-website

Conversation Icons

.icon-add-note
.icon-forward
.icon-image
.icon-first
.icon-flag
.icon-last
.icon-merge
.icon-next
.icon-prev
.icon-reply
.icon-send
.icon-tag
.icon-workflow
.icon-workflow-lg

Custom App Icons

.icon-cart
.icon-case
.icon-cash
.icon-globe
.icon-arrow-fill
.icon-star

Mailbox Icons

.icon-attach-sm
.icon-circle-stop
.icon-convo-new
.icon-drafts
.icon-folder-open
.icon-gear
.icon-mailbox-check
.icon-mailbox-plus
.icon-team

Social Icons

.icon-ab
.icon-aim
.icon-fb
.icon-fl
.icon-go
.icon-hangouts
.icon-icq
.icon-li
.icon-msn
.icon-qq
.icon-qu
.icon-skype
.icon-tw
.icon-tw-alt
.icon-xmpp
.icon-yahoo
.icon-yt
.icon-fs

Editor Icons

.icon-align-center
.icon-align-left
.icon-align-right
.icon-attach
.icon-bold
.icon-formatting
.icon-horizontalrule
.icon-html
.icon-hyperlink
.icon-image-sm
.icon-import-image
.icon-italic
.icon-list
.icon-saved-replies
.icon-table
.icon-trash
.icon-underline

Arrows and Xs

.icon-caret-down
.icon-caret-left
.icon-caret-right
.icon-caret-up
.icon-circle-check
.icon-circle-close-solid
.icon-circle-close
.icon-circle-down
.icon-circle-forward
.icon-circle-minus
.icon-circle-plus
.icon-close
.icon-close-md
.icon-close-sm
.icon-close-sm-alt
.icon-plus