# Slicer Slice Viewer Icons

Below is a current snapshot of icons for Slicer's Slice Viewers.

To create NEW icons to add to this set, please follow [this simple workflow NOT YET LINKED]. The workflow will refer icon designers to Slicer's [Icon Design Guildelines] and Slicer's [Color Palette] to ensure new icons are visually compatible with Slicer's icons and that they work well in both Dark and Light Themes.

## Icon set symbolics

* **Source (volumes):** orthographic cube

* **Image|view|slice:** plane with axis & 4 quadrants OR 4 voxels

* **Action/processing:** green/amber object color TBD

* **Plane with bar across top:** slice|image viewer

* **Segmentations:** shows dyadic (2D and 3D) construct

* **Label maps:** show 2D (label per sample in image|view)

## Refactored Volumes and Models Module Icons
**Volumes Module Icon**
Modified to reflect 3D rather than 2D representation.

**Models Module Icon**
Also, **two versions** of Models Module Icon are checked into github, one simple with no fill, and the other with fill color consistent with segmentation model symbology. The team can choose which is preferred for use.


## Lightbox View Configuration icons
We discussed in developer mtg moving lightbox out slice viewer. Created viewer config icons for lightbox view in R|Y|G viewers, in case this functionality is added to Viewer Configuration Icons, where it seems appropriate to include. These are checked into github.



## New Colors (Choose between ActionGreen and ActionAmber)
Slice Viewer Action Green:
* HEX #1FAD42FF
* RGB 31 173 66

SliceViewer Action Amber (LightTheme):
* RGB 237 136 0
* HEX #ED8800FF

SliceViewer Action Amber (DarkTheme):
* RGB 250 159 0
* HEX #FA9F00FF

Slicer Segmentation and Label Grid Green (LightTheme):
* HEX #738C79FF
* RGB 115 140 121

Slicer Segmentation and Label Grid Green (DarkTheme):
* HEX #56695BFF
* RGB 86 105 91

Slicer Segmentation and Label Outline Green:
* HEX #14CC42FF
* RGB 20 204 66

## TODO: Final color decisions:

Colors we have for important conceptual coding: Green is easily perceived in both Dark/Light themes. We can also use orange/amber (mixes of primarily green and red) and cyans (mixes of primarily green and blue) for important color codes, but these will likely want to be HSL-tuned a little for best effect on both dark and light background. That means more stroke-fill color swapping when switching themes.

**Lock in a color** for 'segmenation' (green or cyan?). This choice will actually be a TRIAD of related colors -- muted for FILL; saturated for OUTLINE; and darkened muted for "SAMPLING GRID/MODEL WIREFRAME". The pattern is used most heavily in the slice viewers and segment editor module, so pick a color you will like to see a lot of.

**Lock in a different color** for 'action' (green, amber?). This color will be used application-wide in slicer, including in editor.

Update palette with Color Choice.**

## Full Icon set for Slice Viewers Light Theme (both options V2 & V3)

Light Theme V2


Light Theme V3

## Full Icon set for Slice Viewers Dark Theme (both options V2 & V3)

Dark Theme V2

Dark Theme V3

## Slice Viewer Mockups

Light Theme V2

Dark Theme V2

Light Theme V3

Dark Theme V3

---

### Color-coding consideration:
V2 presents a lot of green, and green is double-coded to mean BOTH Segmentation and Action on an image/slice/view here. The saturated green is distinct enough from segmentation green, but making this distinction clearer would be best for interpretation (and teaching). V3 makes -PRESENTATION OF- and -ACTION ON- a view/object much more distinct at a glance.

## Grouped descriptions of icons (only V2 shown)

**Slice Viewer R|Y|G Toolbars**

Pin|Unpin, Viewer R|G|Y Label, Reset Field of View, Max|Minimize View.


Font chosen is Gill Sans, but do choose what you like.

---

**Main Toolbar Viewer & View UI**

Hide|Show UI, Link|Unlink, Visible|Invisible, Axial|Sagittal|Coronal, Lightbox, Hide|Show Reformat Widget, Blend Mode, Slice Spacing, Rotate to Volume Plane, Orientation Markers, Ruler Display, Thick Slab Recon. Compare the current UI with proposed mockup below.

[Again, trying out Axi/Sag/Cor icons - for discussion. I think these are pretty clear about slice plane orientation while being view-direction-agnostic.]


---

**Foreground and Background Layers**

Foreground Layer Label, InterpolationON|InterpolationOFF


Background Layer Label, InterpolationON|InterpolationOff


**Label Map Layers**
Icons convey strictly 2D construct.

Label Layer Label, Visible|Invisible, Label Display Options: Fill|Outline|Fill+Outline


**Segmentation Layers**
Icons convey dyadic 2D/3D construct.

Segmentation Layer Label, Visible|Invisible, Segmentation Display Options: Fill|Outline|Fill+Outline, Each Segment Visibility (discussed excluding this element in meeting.)