Wärtsilä has a defined icon family which is used across all of our marketing materials and software applications. These icons have been carefully crafted by our design team and are a vital part of our brand visuals and our UX.
There are currently 401 icons available for download.
The icons were optimised for software IU application, marketing and presentations material. There is a base-set of icons available for download behind the link below. However, if other icons are needed, such can easily be created by following these guidelines.
Any new icons that are created must be aligned with the rest of the icon family and adhere to the same design principles. One of the major inspiration sources for the Wärtsilä icons was the international standard labels, which are attached to
machines and electric products. Their common features are bold lines, round shapes, simple structures, and they can be presented in two-tone print. Even in a chaotic layout, with small text, numbers and other labels placed around them, these icons
can still easily be spotted from a distance.
Download the official Icons
The Wärtsilä icon library can be downloaded from the Brand Hub. The icon files are available in ZIP packages divided by colour. Each package contains both PNG and SVG file formats.
The current icon count:
401 ICONs
Black Icons ZIP
file incl. PNG and SVG files
White Icons ZIP
file incl. PNG and SVG files
Official icons in Adobe Illustrator (AI) format
An index of the available icons can be downloaded here:
Official Icons index
Hero icons
Hero icons are useful when you want to add a Wärtsilä personality in the look of digital products; use them wisely.
Some icons are perhaps easy to neglect, the directional icons for example, but regardless of their size, they are still powerful tools for making sure our digital designs have a consistent appearance.
Icon grid
The thickness of the line is standardized at 4px and 2px. The gap between the lines should be minimum 2 px. Most of the structure should be composed by robust straight and/or round lines. Avoid too generic looks, but do not sacrifice the readability.
When designing an icon, please remember to leave some space for the icon to breathe. The lighter pink area pictured below is a soft no-go
zone with the width of 6 px, the deeper pink area of 2 px is the hard no-go zone. This will also help the icon to be more centrally focused.
Repeatable elements
We encourage you to spot the repeatable elements in the icon library and extend those elements to other icons in the future.
Through this method, you can increase productivity, the readability and keep the overall library’s look consistent. Those small elements can be slightly adjusted according to the need for individual icons, but the main feature should remain the same.
Here are some examples of repeatable elements.
Digital
When a design calls for a "data or information processing"element in an icon, please leverage the standard circuit element like in the examples below. The blue area is shown for illustrative purposes and is not intended for final designs.
Maintenance
When a design needs to convey repair, system check or settings in an icon, then leverage the standard wrench element like in the examples below. The blue area is shown for illustrative purposes and is not intended for final designs.
Usage of icons
Besides the basic rules of not stretching and twisting the existing icons, nor presenting them at different angles, another common incorrect way of using icons are to place them on a dark background with too little contrast. Icons are provided in black and white. Choose the colour of the icon to suit the background.
Always strive for the best readability.
Icons in presentations and marketing material
The use of icons in presentation and marketing material, the restrictions and guidelines are more flexible. However, the icons should adhere to the overall brand guidelines. Please refer to our visual guidelines for more information on these areas and always use Wärtsilä templates when available. The overall layout should be simple and sharp. The icons alone are often not enough to explain the key features or certain status, so some text placement is necessary. The usage rules of icons are similar to the usage in user interface environments. However, there are a few parts which are following different guidelines.
Please see the details and examples below.
Free size
In the marketing material, the size of the icons are not restricted. Generally, on darker or more complex backgrounds, the icons need to be bigger than the ones on light coloured backgrounds. Try not to place too many icons on one page.
Background picture allowed
When placing icons on dark or complex backgrounds, be aware of the readability level. Usually grayscaling the background photo or adding a colour overlay plus a shadow effect on icons makes the icon pop up more from the background. This depends largely on the background photos you select, so avoid visually busy ones.
Shadow effects
In marketing materials, like posters or online banners, the icons are allowed to include shadow
effects within reason when they are on dark photo/ colour backgrounds. On light or white
backgrounds; shadow effects are not recommended.
