Started in [[ https://github.com/wikimedia/wvui/pull/47/files/e2ae565b95f8e11559d0adfffa8f83cb89043445#diff-f477b34747745de5ff5fb75ec118a78bR3 | Icon Component ]] conversation, the request for customizable icon sizes for the library was brought up by @santhosh.
While WikimediaUI theme is set to only two distinct icon sizes – [[ https://design.wikimedia.org/style-guide/visual-style_icons.html | 20x20 dp canvas as default ]] and 12x12 dp as (deprecated) special case indicators, there might be consumers of the library with further needs, possibly implemented in a different theme.
We've come to update many indicators and by-standing icons to 16x16 dp in #Codex components. 16x16 is also the minimum size for icons in OS icon listings (Windows and macOS).
- 20x20 dp as default: token `size-icon-medium` (for backwards compatibility and clarify if we deprecate this and introduce `size-icon-medium` as successor)
-- Implement that choice into Icon.vue
- 16x16 dp: `size-icon-small`
- 12x12 dp: `size-icon-x-small` – We shouldn't even call that icon, it's of no use with its usability/recognition issues and should only be used in two or three places, like the Select arrow indicator
=== Clarify further needs
- There has already been 30x30 icon size implemented a while ago in [[ https://en.wikipedia.org/wiki/Special:Notifications | Notifications ]]
- Microsites feature higher icon sizes, here for example [[ https://design.wikimedia.org/ | Design entry page ]] with 60x60:
=== Design spec
| [[ https://www.figma.com/file/nWQNsStHDEVqOzFdIeM34J/Icon-sizes---T260617?node-id=1801%3A2730&t=OUb7kZIFhdp4EcpN-11 | Icon sizes spec sheet ]] |
== Acceptance criteria for Done
[-] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's MVP version has been added to this task's description.
 Include the component spec sheet in the Figma library
 Implement icon/indicator size and min-size tokens
 Move default size to Icon.vue
 Add prop for custom icon sizes for components using it