Iconography

Iconography is the use of icons to represent concepts, actions, or objects on a website. Icons are small images that convey meaning and function through their shape, color, and style. Icons can be used to enhance the visual appeal, usability, and accessibility of a website.

Iconography is important in web design and development because it:

• Makes text understandable: Icons can complement or replace text to make it more concise, clear, and engaging. Icons can also break up the monotony of long paragraphs and create visual interest.
• Draws attention: Icons can catch the user’s eye and direct them to important information or actions. Icons can also create contrast and hierarchy among different elements on a website.
• Enhances appearance: Icons can add personality and style to a website, reflecting the brand identity and voice. Icons can also create harmony and consistency among different pages and sections of a website.
• Eliminates the language barrier: Icons can communicate universal concepts that transcend linguistic and cultural differences. Icons can also help users who have low literacy or visual impairments to understand and navigate a website.
• Improves navigation: Icons can guide users through a website, indicating where they are, where they can go, and what they can do. Icons can also help users find what they are looking for quickly and easily.

Some of the icon properties that web designers and developers can use to manipulate icons are:

• Size: Specifies how large or small an icon should be
• Color: Specifies the hue, saturation, and brightness of an icon
• Shape: Specifies the outline or silhouette of an icon
• Style: Specifies the level of detail, realism, or abstraction of an icon

Iconography for CDS

After analyzing the iconography of various design systems, we have come up with a set of guidelines for the CDS iconography. These guidelines are based on the experimentation and research done by the CDS team.

• Thick Strokes: CDS components uses blur in their background and the primary background is preferred to be dynamic. For these reasons, the icons in the foreground should have a slightly thicker stroke than the usual ones.
• Smooth Curves: Components of CDS have a rounded, smooth corners. Using sharp edged icons are not advised because they are inconsistent with CDS components.
• Filled Icons: For better readability considering the dynamic background in CDS, using filled icons and dual-tone icons is preferable over thin outlined icons.
• Pixelated Style: The texture of CDS, 'TJ' has noise in it's background. Pixelated icons seem to match this style. While choosing the pixelated icons make sure that they ar readable in-spite of the pixelation.
• Large Size: It is advisable to use larger icons than usual for ensuring the legibility and usability on dynamic backgrounds.
• Drop Shadow: If the icons have less readability, consider adding drop shadow to highlight them.

Top Picks for CDS

Emoji 😊

Emoji can be considered as a special type of icons that have more expressive and emotional features than regular icons. Emoji can also be combined with other icons to create new meanings or effects. For example, an emoji can be used as a modifier for an icon to indicate its status or mood. 🚀👍

Emoji play an important role in typography and iconography because they:

• ➡️ Enhance the emotional and linguistic functions of text, adding nuance, tone, humor, and personality to the message 😂😍😎

• ➡️ Attract attention and create visual interest, breaking the monotony of plain text and adding contrast and hierarchy to the layout 🔥🌈👀

• ➡️ Overcome the language barrier and increase the accessibility of text, communicating universal concepts that transcend linguistic and cultural differences 🌎🌍🌏

• ➡️ Improve the user experience and satisfaction, creating a more engaging and enjoyable interaction with the interface 😊😁😘

Top Pick for CDS

• Fluent 3D (opens in a new tab)