The new subicon feature falls short in numerous ways: background padding, sizing, fixed positioning, etc.
6 Likes
The new subicon feature allows you to edit icons the same way as before: you can recolor them, change their position and padding relative to the main icon. Now you can even move both the main icon and the subicon, this option was not available before.
The only option that doesn’t work the same way is a stroke. You can apply it to the main icon only.
Could you share some more details on which effects don’t work for you? A screenshot or a video would help.
Please have a look at the attached icons.
In the old version the sub icon is much bigger and it hides the main icon. Now the sub icon is quite small and has a transparent background, so that its visibility is reduced massively.
It’s also difficult to drag the sub icon with the mouse to the same position repeatedly.
The problem we face is, that if we have to add an overlayed icon to our UIs, it is not possible to match the old look. But even if we replace all overlayed icons, their quality would be much lower than before.
Suggestions
- sizable sub icon with old size as default
- possibility to make the background of the sub icon transparent or not
- possibility to place the sub icon at a defined position
- style of the sub icon should match the style of the main icon by default
BTW: Thank you for this great icons!
2 Likes
Kerem, thanks for the detailed description!
We have already added your suggestions to our backlog, and will implement them soon. There will be no overlay comeback, but the subicon feature will have all the options you mentioned.
1 Like
Agreed! I really wish the subicon feature was re-sizeable. I often find it’s much too small for the media I’m using!
2 Likes
Any updates on this? I’ve created a lot of icons with overlays in the past but am unable to match the style with the new overlay feature. I really don’t feel like creating all icons again.
One of the problems with the new overlays is that the background/padding is white instead of transparent.
Jasper, we have added the option to disable the background:
Do you have any other suggestions? We tried to add all the essential features that I had mentioned earlier in this topic. If you have anything else in mind, let us know.
Hi,
Jasper and I work for the same company. The trouble we run into has to do with overlays. We have used Icons8 for a long time and it has become increasingly frustrating for us to deal with the new overlay feature. In the software applications we create, we try to recolor the SVG when the icons are loaded which will make sure that the icon is the correct color.
This is an icon made with the old overlay feature, and in use:
Icon:
They way the icon would look with the new icon overlay feature is this:
Removing the background, adding stroke (essentially placing a white layer), or anything else causes the icon to simply add layers and color information to the icon, causing us to be unable to recolor the SVG. To to mention that the icon now looks different from the old icons, resulting in icons looking different from one and other.
I hope this gives a bit of insights into the problems we are facing. Currently, any new icon we introduce into our application looks either slightly different from others due to added overlays/subicons, or cannot be recolored successfully
Hey Mark,
Thank you for the detailed description and examples! We’ll take a closer look at the issue and get back to you a bit later.
Mark, could you describe the process of recoloring the SVG icons with the new overlay feature? Which software do you use, and how do you change their color?
A step by step description would help us find the way to solve this issue with recoloring.
We are already changing the way backgrounds for the subicons are generated. It will be reverted to the old way, like it used to be with the old overlay feature.
Hi Elena,
Our graphical user interface recolors icons by generating CSS for each icon. It will set the Fill and/or the Stroke to a particular color. For example:
(App in Light mode)
(App in Dark mode)
We might be able to do more research into how to recolor icons that were made using the new overlay feature, but at first glance it is not easy to resolve.
Hearing about the old overlay feature returning is great, thank you for your help and understanding 
Thanks for the details! We have found the way to make it work and added the task to our backlog. When it’s released, the icons with overlays will look the same as before, and you will be able to recolor them.
2 Likes
Hi @elena_icons8, has the task been planned for a specific date in the near future? We currently have about 100 icons with an overlay that we cannot edit successfully to remove the Fill color.
The non-overlay icons are great and work perfectly inside our applications!
Looking forward to hearing about the implementation timeline, thanks!
Hi Mark,
Thank you for your patience! We were planning to solve the issue with recoloring earlier, but we ran into unexpected issues, so we postponed it a little. Anyway, we have already included this task in our plan for June, so it should be done within the next month.
I will let you know as soon as it is ready!
Hi Elena,
Sadly I haven’t heard back from you about this. I have become more disappointed in the overplay/subicon feature as the subicons itself have changed in design, and also thinkness it seems. For example, the Gear subicon has changed (for Material Outlined):
The gear subicon used to look like this:
Our applications relies on consistency in subicons, and this is now made impossible. How can be solve this Elena? We have come to a point that we can no longer use the subicon feature at all…
Hope we can sort this out together. Icons8 provides a huge amount of high-quality icons, but we do really need the subicons to stay consistent over time - as in backwards compatibile.
Best regards,
Mark Jongeling
Hi Mark,
I think that the best solution for you will be to use Iconizer: icons8.com/iconizer. It’s our online editor that allows adding subicons in a style that is different from the main one.
As for changing the subicon feature in the main editor, we actually did this because we wanted our users to have consistent icons, even after the editing. That might be pretty hard to accomplish when icons and subicons from different styles are mixed together.