Homey uses icons in various places to improve the user experience. All icons are in Scalable Vector Graphics (
.svg) format, because SVG icons scale without quality loss.
The color of your SVG is ignored and overlayed with another color throughout the interface.
SVG icons for your project can usually be found on the internet on websites such as the Noun Project.
Request a custom icon
If you require specific icons for your app, we can provide a handmade icon for you. To request such an icon, create an issue at the Homey Vectors repository.
Creating your own icon
Want to create your own icon? Go for it! Keep the following tips and tricks in mind.
- Start with a canvas or artboard with a grid of 960 x 960 ‘pixels’.
- Outer lines should have a stroke thickness of 30 to 40 pixels.
- Inner lines should have a stroke thickness of 15 to 20 pixels.
- Use the full canvas! Fill the icon till the edges. For a high icon this means from top to bottom (white space on the sides is alright). For a wide icon, this means from left to right (white space at the top and bottom is alright).
Strokes, Layers and Groups
As mentioned, the color of the SVG is overlayed. This can cause errors if the icon is not set up properly. Get familiar with the pen tool and learn to use the combine or pathfinder tools. Usually with these tools you can select a path operator such as Combine, Subtract, Difference and Intersect.
Just like your desk, keep your icon organized! Prevent unnecessary grouping, this can create a possible masking (clipping mask) issue with the icon. By keeping it clear it's less prone to errors.
A stroke cannot be subtracted from a path. Create an outline first, this is a path which can be subtracted.
Create a ‘debug’ background layer containing a contrasting color, for instance blue. White paths, which should be cut out or subtracted from the underlying path become clear.
To test your final result zoom out and look from a distance. Can you still recognize the shape of your icon? Does it resemble the device or brand? If so, you succeeded!
Do's and Don'ts
Icon in a Flow card: