Icons
Icons are visual representations of commands, devices, directories, or common actions.
They can help users find their way through an interface, clarify the meaning of buttons, and prepare users for what happens next.
Our library of icons for a health system is composed of Material Symbols and Icons. Follow the Introduction to install icon's dependencies.
General guidelines
- Icons should be used intentionally to maximize understanding and reduce cognitive load when you need to draw attention to a particular action, command, or section. Use them infrequently: If you're questioning the use of an icon, you probably don't need to use it at all.
- Icons that are clear, intuitive, and simple enjoy a higher degree of recognition and are more easily understood.
- All icons in the user interface must have a consistent style (detail design, perspective, stroke weight, etc.). The use of icons that do not belong to Panelita library is not supported.
- An icon's design communicates tone, as does the content it's paired with. It prioritizes the rendering of the function, rather than how nice it looks.
- There are few widely recognized icons, so whenever possible, use a label or supporting text to ensure their meaning is understood. In this case, an aria tag will be used for the icon.
Sizes
There are 3 icon sizes in our design system:
- 16px (small) Small icons are best used when space is limited.
- 24px (medium) Medium icons are used in most of our interface. These are our standard size.
- 32px (large) Large icons are used sparingly to emphasize a concept or when there is a lot of space. Wherever it is used, consider the fidelity of the icon in the space in which it is used. (If there is a lot of space, a spot illustration may be more appropriate.)
In general, we need to consider the context of the icon when adjusting the size, such as the size of other icons around it and the balance of other UI elements.
