Update Slicer's icon set

Development
1

We are making great progress with supporting dark mode in Slicer (see here). However, our current icon set holds us back, as many of the icons are not very well visible/recognizable over dark background. Refreshing our icon set is also necessary because they have not been updated to match the much higher resolution of current displays. Also, many new icons were added, which don’t follow the style of the original Slicer icon set.

The question is, how could we get a new icon set and make sure we have a sustainable source of new icons for new features that are going to be added in the future?

Requirements:

  • we should to get the complete new replacement icon in no more than 1-2 months
  • sustainability:
    • we should be able to get new icons for new features in no more than 1-2 weeks
    • we should be able to regenerate the icons at arbitrary resolutions (access to vector source)
    • preferably icon source should be editable with free software (Inkscape)
  • openness:
    • we should be able to host all the used icons in our public github repository
    • we should be allowed to modify and combine icons
    • extension developers should be able to create similar style icons (maybe with slightly different color scheme)
    • Question: is it important that companies who develop Slicer-based products can use the icons without buying license (typically few hundred $)?
  • style:
    • design should be simple, but not too simple: monochrome line icons are probably too simple (it could be hard to create meaningful icons for complex features); full-color, gradient, 3D icons are not trendy in these years
    • compatible with both light and dark background

Question: Any more requirements to add?

I’ve done some research and found that there could be two potential solutions for obtaining an icon set.

Option A. that there are very nice icon sets (containing thousands of icons), which could replace about 2/3 of our existing stock icons and could be used for constructing the remaining application-specific icons. This would allow us to get started quickly, create new icons in the future as needed (using/combining/customizing existing icons), and it would be inexpensive (probably a few hundred, worst case a few thousand $). The only limitation would be that we would not own the images, so companies that build products based on Slicer and use these icons would probably need to pay a few hundred $.

Option B. Hire a designer, who would create custom icons for us. The cost could be about $20-$40/icon and maybe we could negotiate a deal that they transfer ownership of the icon to Slicer (into the public domain), but maybe not. We need 150 commonly used icons and about 60-80 custom icons, so the total cost could be about $5-10k. It could take a while to design these icons, and long-term sustainability could be a question (as we would not have thousands of pre-created icons that we could choose from when adding new features, but we would rely on the availability of a single person).

Question: Do we agree that Option A (starting from stock icon set) seems to be a better approach?

Finally, about the style:

  • We probably don’t want complex, detailed, gradient, 3D-effect icons, as they are not trendy.
  • There are duotone icons, which are solid icons using two colors in addition to the background color. These look nice, but usually the icon sets are much smaller, so it is not easy to find icon sets that cover most of our needs. Example:
  • Line icons are nice and simple and trendy. With only a single color, they are pretty dull and hard to distinguish, but since we have access to the editable vector-graphics source of the icons, we can easily color them. They are easy to edit and combine them, since they are just lines. There are huge, inexpensive line icon sets, for example this:

For example, we can color (using open-source Inkscape editor) a line drawing icon by using this palette like this:
Original:image

Question: Would line drawings with flat duotone-like coloring seem like a good style or there are other suggestions?

1 Like
2

Updating the icons will be great. Modern icons would greatly help for a first good impression with new users. Minimalist/flat is the current trend which is good. However, I would avoid choosing a super flat / super minimalist style (e.g.: https://www.streamlineicons.com); or at least not for everything. I am not sure which icons package is the best, but we should ensure also that there are enough “medical/scientific/computing” icons in the package (otherwise probably it would not make sense to go with Option A). I’ll scan the web too for icon sets, so we can see all the options.

1 Like
3

This was from Steve when we were talking about icons in an old post: https://react.ohif.org/elements/icon

1 Like
4

Thank you. This is a selection from the font awesome icon set. They look “modern” but I find many of the icons very loosely related to their assigned meaning. This is a good example of how hard it is to find expressive icons in a small icon set.

I agree that monochrome line drawing is too simple for a desktop application, because appearance of standard widgets, buttons, sliders are much more detailed, it looks odd that icons are so minimalistic. However, with duotone coloring, they can be made quite nice. It makes icons much easier to color if lines are closed and Streamline icons tend to leave curves open, so for that reason this icon set might not be ideal.

Ide checked out 10-20 largest icon sets and medical/scientific icons are mostly useless, as they are not specific enough for the features that we need. However, about 2/3 of the Slicer icons are generic computing/GUI icons (arrows, files, folders, layers, show, add, delete, etc), so we can find suitable icons for these in most sets. For the rest, we can get inspiration from thousands of other icons, modify them, combine them.

1 Like
5

I’d really prefer to avoid anything that requires people to buy a license to reuse Slicer. It would be so much nicer if someone with talent who believes the the value of free medical software to spend time making icons.

Such people may be hard to find, but we have found people who contribute code, tutorials, and support, so maybe we can encourage icon contributions too.

Maybe we can reach out to a community of artists to ask for help.

4 Likes
6

I agree and having a shared repository, something like CTK, would be amazing. On the other hand, if we have to do this ourselves without professional help, an icon package will help. In general, I also would like to avoid any strict license. I guess at the end, it is a balance of the resourses that we will have for this and interest in updating the icons from the community.

1 Like
7

A fee to license the icons would be a barrier for creating a small scale commercial product for me. Probably not an insurmountable barrier, but it would factor in. It would also feel pretty odd that out of all the amazing tools and capabilities of Slicer, the part that wasn’t free was the icons. If Slicer goes that route, which would be very understandable, it would be great if there were an option to use existing free icons and/or substitute custom developer-supplied icons. I can imagine developing a Slicelet with a pretty small set of needed icons, and I might prefer to create a few or use older style icons rather than pay a licensing fee.

1 Like
8

I fully agree that it would be so much better to find an artist who could can design a few hundred nice icons in no more than 1-2 months for no more than a few thousand $, put all the icons into the public domain, and make a commitment to be available for designing new icons when needed. However, it is just so much unlikely to happen. If you know someone the let us know.

In contrast, paying about $1000 for an existing icon set a maybe few thousand $ for someone to combine/customize them to create icons Slicer-specific features sounds something that can be done. Risk and cost is quite small and the whole project could be completed in a couple of weeks.

Replacing the default Slicer branding (custom style sheet, icons, etc.) is usually among the very first tasks in commercial product development projects (everybody wants his application to look unique). It should be already possible to override the default icon set without changing Slicer’s source (by setting Slicer_LOGOS_RESOURCE variable to your custom resource file).

Maintaining two icon sets within Slicer would be too much work (we already struggle with only one), but licensing fee for an icon set for a single developer is usually less than a few hundred $ but may cost much less (roundicons vector native line icon set contains 7000 icons and costs $45).

1 Like
9

I think finding a good icon designer on upwork/fiverr/etc. is not a problem. I guess the issue may be where we can get the funding for it. Unfortunately, as now I am a freelancer too, I don’t have funding possibilities at the moment.

I agree, and a cost of ~100 dollars license should not be an issue also for small scale commercial product.

On the other hand a good icon artist/designer may create something much better and customized for 3DSlicer.

1 Like
10

It is actually not easy: it is a huge task to design hundreds of icons, it may cost tens of thousands of $, you need to find an artist who is willing to give up all rights on his creations, to make sure the right person is found, we would need a multi-round selection process, etc.

Kitware has a few full-time UI/UX designers, who might be able to help with this. @jcfr will ask and report back next week.

1 Like
11

I just created an entry in our UI/UK task tracker, I will report back once i have an update.

12

Here’s a link to previous notes on this topic

13

I’ve found a way to fix Slicer’s blurred icons on high-resolution screens (which is nowadays most laptop screens and many desktop monitors, too). However, for many icons there is no high-resolution versions, so we would need to re-draw many of them. If we spend time with re-drawing icons, it would make sense to make them looking more consistent, more moder, and dark-theme-friendly.

I’ve created a Labs page for describing this project: Modern Look · Slicer/Slicer Wiki · GitHub

I’m currently experimenting with how to create icons and will soon submit a draft pull request that demonstrates some of the early results.

1 Like
14

The pull request that updates a number of icons is available here:

Anyone is welcome to comment on the discussion there.