Icon

Each icon set serves a different purpose and context.

Standard icons are pictograms that represent general technology concepts in marketing materials, presentations, web content, infographics, and diagrams. They are typically decorative and used to add visual interest to text.

Learn more bout standard icons

UI icons are utilitarian and appear in digital experiences to facilitate navigation or add visual context. They need to be immediately understood and remain clear at small sizes.

Learn more about UI icons

Microns are UI icons that frequently are used at very small sizes. Using this set, rather than the regular UI icon set, helps to retain the legibility of the larger UI icon.

These icons are used to represent social media platforms and are often linked.

Icons can convey abstract concepts quickly and help users navigate a new interface. For example, a folder icon helps users understand the concept of organizing and storing files in their computer because it provides a connection to file organization in real life.

The association between an icon and a certain meaning can be strengthened by how frequently it is used in that context. A magnifying glass, for example, is frequently used to denote Search, so it is easily recognized by users. This is especially helpful when an icon appears without supporting text nearby.

Icons are pictograms and are not meant to be used at large sizes. If you need a visual element that is larger than 100px, use an illustration instead.

Use icons at 100px or smaller.

Do not use icons at very large sizes.

If icons are being used within elements that are grouped together like in a vertical list of links, they should appear to have the same size.

Use <rh-icon> to ensure consistency and alignment.

Do not use icons without a container, especially if grouped.

Use an icon that is familiar, can be commonly understood (ideally across cultures), and makes sense when paired with text.

A pencil icon is often used to represent the ability to edit something.

A set of utensils is not associated with editing.

If the meaning of two icons might be related, use the icon that could typically be seen more often. This helps users quickly recognize what interactions are possible.

An X icon is very commonly used to indicate that something can be closed.

A trash can icon indicates that a user can delete something, but it is not a proper substitute for an X (close) icon.