Claromentis Design
Icons
Icons
UI Icons
Claromentis is using Ionicons, an open-source icon set with over 1,300 icons. Ionicons are available under MIT license
Explore specimens or download designer pack
As of 2021 Glyphicons have been deprecated and must not be used to represent Claromentis brand, features or applications
Variants
Each icon is available in three variants. Filled and Outline can be used interchangeably as required.
| Variant | Purpose | |
|---|---|---|
| ✅ | outline | Default variant, also used for elements that do not need to stand out |
| ✅ | filled | Used to emphasize an object or action |
| ⚠️ | sharp | Used for prototyping only to reduce visual complexity |
Application icons
Claromentis applications are represented as hierarchical icons (containing elements of varying opacities). This adds depth and emphasis to important elements of the icon.
Clarometis app icons on Zeplin app | web;
Theming
Application icons support theming with a solid tint colour however, care must be taken to avoid misrepresentation of the produuct when customer branding is applied.
| Preview | Fill | Purpose |
|---|---|---|
 | Gradient | Default representation of the icon must be used in Product and Marketing |
 | Solid | Solid fill must only be used to illustrate customer branding and must not be used to represent the application as a whole |
SVG Structure
Vector icons must follow the following structure.
| Layer | Type | Description |
|---|---|---|
| top-layer | Shape | Gradient or solid fill |
| bottom-layer--style | Group | 50% opacity applied |
| bottom-layer | Shape | Gradient or solid fill, nested inside bottom-layer--style group |
Implementation
The icons can be implemented in multiple ways including using them directly as SVG, calling them with the <ion-icon> component or downloading and converting them to your desired file type, the easiest way to display them within Claromentis products is with the Ionicons web component which is included with both the Claromentis intranet software and the company website.
Typical file paths
| Site | File Path |
|---|---|
| Claromentis intranet software | /interface_default/[module-folder-name]/assets/images/[file-name.svg] or /web/assets/images/[file-name.svg] |
| Company website | https://www.claromentis.com/wp-content/themes/claromentis-theme/images/app-icons/[file-name.svg] |
The
[file-name.svg]can be replaced by any of the SVG file names in the table below.
List of icons
A complete list of all Claromentis icons.
