Creating new icons
This page describes how to create and use new icons for the xCoLab. It gives some indication of the
The preferred icon format is SVG, as they are sure to look good on all screen sizes without extra effort and they can be styled using CSS, removing the need to have several version of icons in different colors.
Some icons, most notably the menu icons, are inline SVGs. They are JSP tags in the icons folder of the view.
These icons have two advantages over external SVGs:
- they don't need extra time to load
- they can be style with CSS
They should be used above the fold or when several colors of the same icon are needed. Note that repeating the same icon more than once on a page does not hurt page size much, as identical icons compress well.
The preferred icon format is SVG. If the icons doesn't need to be inlined for one of the above reasons, it can be referenced as an external SVG. This works just as an external PNG would, but the SVG format allows for crisp icons on all screen sizes and is quite efficient for simple shapes (which is what most of our icons are).
External icons are in the icons folder inside the images folder for static files.
If the SVG format is not appropriate for some reason, JPEG or PNG images can be used as well.
To keep a unified look and feel and keep everything snappy, there are a few guidelines to keep in mind while designing icons.
Our icons are generally drawn on a 512 by 512 grid. All SVGs should have a viewBox="0 0 512 512" attribute on the root element.
You can use this template as a reference:
- Green is the safe zone, where the main body of the icon should be.
- Yellow can be used if needed, but should only be used for protruding elements.
- Red should not be touched by most icons, but can sometimes be used by elements protruding on only one side, e.g. the "plus" on an add user icon.
Large images slow down page load times, so it's important not to make the icons any larger than necessary. For SVGs, make sure you compress them, e.g. using SVGO (check out this handy online tool).
The standard SVG format can be seen in the svg.tagx file.
If you used or adapted an icon from elsewhere, you can give credit on this wiki page: Credits. Make sure that this way of giving credit complies with the license and we are indeed allowed to use it this way.