Icon
Usage
Definition
Icons help communicate key touch-points in the experience. They are to be used in combination with text and without text.
Interstate Icons
The Interstate Icon set is available for download via npm as optimized SVG's.
const UsersIconSVG = require('@prism2/icons/interstate/users.svg');
Icon Gallery
Usage Guidelines
To promote ease of scanning and understanding, follow these UX best practices:
Use icons to communicate meaning or emphasize meaning.
Use icons to mean the same thing that they mean in other Manheim applications.
Use text with icons whenever possible.
Use stand alone icons sparingly and specify the alt-text that communicates the meaning of the icon.
Icons with inline text are typically 12px, 14px, or 16px.
Large stand alone icons should be sized in multiples of 8 (e.g. 24px, 32px, 40px, etc).
Provide proportional white space around large standalone icons, also in multiples of 8.
Use icons as visual enhancements without meaning. Instead, use textures, illustrations, etc as visual enhancements when appropriate.
Use icons to mean something different than their common meaning at Manheim.
Use different icons to mean the same thing.
Use so small an icon that it becomes illegible.
Use so large an icon that it crowds out proportional whitespace.
Code
Icon Methods
Icons can be applied by including the SVG in the file directly via import or the require() function.
const eyeIcon = require('@prism2/icons/eye.svg');
Or Icons can be rendered as a React component
import { UsersIcon } from '@prism2/icons-react/interstate';
function renderIcon() {
return <UsersIcon />;
}
Icons can also be added to the DOM via the icons-react package
Color, Size
Icons can be styled with utility classes.
<CheckmarkSolidIcon className='self-center flex-none inline h-6 mr-2 text-green-500' />