Anatomy
'%20fill='%23843CC7'/%3e%3crect%20x='114'%20y='106'%20width='24'%20height='24'%20rx='12'%20fill='%234B00E2'/%3e%3cpath%20d='M127.534%20113.318V123.5H125.993V114.859H125.933L123.497%20116.45V114.979L126.037%20113.318H127.534Z'%20fill='white'/%3e%3crect%20width='1'%20height='16'%20transform='translate(166%2090)'%20fill='%23843CC7'/%3e%3crect%20x='154'%20y='66'%20width='24'%20height='24'%20rx='12'%20fill='%234B00E2'/%3e%3cpath%20d='M162.686%2083.5V82.3864L166.132%2078.8168C166.5%2078.429%20166.803%2078.0893%20167.042%2077.7976C167.283%2077.5026%20167.464%2077.2225%20167.583%2076.9574C167.703%2076.6922%20167.762%2076.4105%20167.762%2076.1122C167.762%2075.7741%20167.683%2075.4825%20167.524%2075.2372C167.365%2074.9886%20167.148%2074.7981%20166.873%2074.6655C166.597%2074.5296%20166.288%2074.4616%20165.943%2074.4616C165.578%2074.4616%20165.26%2074.5362%20164.988%2074.6854C164.717%2074.8345%20164.508%2075.045%20164.362%2075.3168C164.216%2075.5885%20164.143%2075.9067%20164.143%2076.2713H162.676C162.676%2075.6515%20162.819%2075.1096%20163.104%2074.6456C163.389%2074.1816%20163.78%2073.822%20164.277%2073.5668C164.775%2073.3082%20165.34%2073.179%20165.973%2073.179C166.612%2073.179%20167.176%2073.3066%20167.663%2073.5618C168.154%2073.8137%20168.536%2074.1584%20168.811%2074.5959C169.087%2075.0301%20169.224%2075.5206%20169.224%2076.0675C169.224%2076.4453%20169.153%2076.8149%20169.01%2077.1761C168.871%2077.5374%20168.627%2077.9401%20168.279%2078.3842C167.931%2078.825%20167.448%2079.3603%20166.828%2079.9901L164.804%2082.108V82.1825H169.388V83.5H162.686Z'%20fill='white'/%3e%3c/svg%3e)
- SVG container: Renders at a preset size or scales dynamically within its container.
- Glyph: The icon SVG path itself. Inherits color from its parent unless overridden.
Guidelines
When to use
Icons are visual elements used to enhance the meaning of surrounding text or represent an action a user may take. While Icons may be standalone within icon-only Buttons, they're best used with supplementary text. When adding Icons to a UI, be sure to use them consistently to preserve the look and feel of the layout. For example, if one item in a list includes an Icon, then all should include one.
Best practices
Color use
Icon color may be changed if necessary, but be sure to use colors to convey a common semantic meaning. Avoid updating colors to meet the needs of a particular color scheme or theme.
For more information regarding Icon color accessibility, see Color and meaning in the Accessibility tab.
Sizing consistency
Visual clarity and consistency is important to the user experience. When using Icons, be sure to keep Icon sizes consistent across the page, especially within close groups. Mixing Icon sizes not only disrupts visual clarity, it creates an inconsistent layout flow that increases a user's cognitive load.
Appearance
Colors
By default, Icon color will match the surrounding text, and these colors were carefully chosen from Pluma's semantic color token palette. While we recommend sticking to this default, Icon color can still be overridden with another available color value.
Icon colors map to Pluma tokens to maintain semantic meaning and proper contrast.
Custom icons
If the available Pluma icons don't fit a particular use case, custom icons can be added with the Pluma Image component. Custom icons are subject to the same size styles that Pluma Icons are.
Custom icons can be used in place of a Pluma icon if necessary.
Filled style
Most of Pluma's icons are outlined, but there are a select few that have filled counterparts. Use filled Icons to show a change in state, such as within an active sidebar navigation link.
Outlined Icons are default.
Filled icons provide stronger visual weight and are used for active or selected states.
Sizes
Icons are available in four preset sizes: small, medium, large, and extra large.
Icons are available in four preset sizes created to feel comfortable within tighter layouts.
Fill mode
An Icon's size can be set to fill 100% of its parent container, allowing it to scale dynamically within a responsive layout.
An Icon size set to fill scales to match the dimensions of its parent container.
Behaviors
Inline icons
Icons that are used with inline text adjust their vertical position to better visually align with the surrounding text. This behavior is automatically based on whether the Icon is next to an uppercase or lowercase letter but can be changed manually.
Icon alignment will adjust based on its surrounding text.
Content
Icon labels
When an Icon appears without visible supporting text, provide a label that describes its meaning or purpose, not its visual appearance. For more information about creating more accessible Icons, see the Decorative and non-decorative icons section under the Accessibility tab.
Note: Icon labels are not visible to the user. Text below is for example only.