Iconography

SOROS icons are clear and minimal. They follow the focused and rational principles of our design system in both metaphor and style.

Icons are small graphical representation of a program or a function. They can be used to enhance the appearance of a web interface and break up the monotony of text.

Use an icon only when it provides additional clarity or is necessary to draw attention to a UI element.

Accessibility

Specify if an icon is decorative

Icons can either be decorative or informative. "Decorative icons don’t add information to the content of a page. The information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive." (w3.org)

Give informative icons a title

A title is required so assistive technology can infer equal meaning as a sighted user would. Use title text that gives context and meaning to the icon (ex: '“Title: ‘Add to cart’)”, and avoid title text that only describes the icon image.

Pair icons with text

Remember that different cultures may interpret the same image in different ways so despite our best intentions it is helpful to provide adjoining text when it makes sense.

Icons shouldn't be interactive

Excluding the Navigation Bar component, icons should not have interactions such as click or hover behavior. Instead they should be wrapped with an interactive element such as a Button.'

Icon Format

SOROS icons are distributed as both SVG files and React components.

Why SVGs

PNGs and JPGs are created using thousands of tiny pixels. SVGs are made out of geometric primitives such as points, lines, and basic shapes. Because of this attribute, SVGs can be resized without any loss of quality to the image. We can also write code to change SVG attributes in realtime. These characteristics are ideal for icons since we usually want to customize their size or color. To do this with PNGs or JPGs we would need to create a separate file for each variation.

Icon sizes

We categorize SVG components into five distinct dimensions: 8px, 16px, 20px, 24px, and 28px. When aligning an icon with a text element, choose the icon size that most closely corresponds to the height of the text. If no icon size precisely matches the text height, opt for an icon size that is slightly larger than the text height.