Overview of the [[ https://doc.wikimedia.org/oojs-ui/master/demos/#icons-mediawiki-ltr | WikimediaUI icon collection ]], which lives in OOUI repository, if, in which products and how they are used.
Status of OOUI v0.28.2.
Based on that, let's open subtasks when icons are
* better moved in other packs/places,
* or removed at all.
| Icon name | in use | location | intentional use/comment
| -- | -- | -- | --
| **Icons – movement** | {icon check color=green} | StructuredDiscussions |
| -- | -- | -- | --
| arrowLast | {icon exclamation-triangle color=green} in plan | | Planned in MinervaNeue
| arrowNext | {icon exclamation-triangle color=green} in plan | | --
| downTriangle | | |
| upTriangle | | |
| collapse | {icon check color=green} | OOUI | Toolbar
| expand | {icon check color=green} | OOUI, VE | Widgets, Toolbar; Media info, error blocks
| move | {icon check color=green} | Extension:CollaborationKit | CollaborationKit seems to be the only place where it's in use, could be replaced, but might still be a useful part of lib
| first | {icon check color=green} | MW | Added in v0.21.3; First search results page button
| next | {icon check color=green} | VE | Find and replace 'next' button
| previous | {icon check color=green} | VE | Find and replace 'previous' button
| last | {icon check color=green} | VE | Added in v0.21.3; Last search results page button
| draggable | | | {icon check color=green} in use in OOUI demo for “DraggableGroupWidget with handles (vertical)”, moved from 'layout' and renamed from “stripeSideMenu”
| **Icons – content** | {icon check color=green} | MW, Notifications, StructuredDiscussions |
| -- | -- | -- | --
| article | {icon check color=green} | RCFilters | [[ https://codesearch.wmflabs.org/search/?q=icon%3A%20%27article%27&i=nope&files=&repos= | FilterTagMultiselectWidget & ViewSwitchWidget ]]
| articles | {icon exclamation-triangle color=green} | | [[ https://codesearch.wmflabs.org/search/?q=icon%3A%20%27articles%27&i=nope&files=&repos= | Not in use yet ]], remains in lib for future usage
| articleCheck | {icon exclamation-triangle color=green} | | [[ https://codesearch.wmflabs.org/search/?q=icon%3A%20%27articleCheck%27&i=nope&files=&repos= | Not in use yet ]], remains in lib for future usage
| articleAdd | | Intended to be used in Advanced Mobile Contributions; added in v0.30.4
| articleSearch | {icon exclamation-triangle color=green} | VE (Search), CodeEditor |
| articleRedirect | {icon exclamation-triangle color=green} | | [[ https://codesearch.wmflabs.org/search/?q=icon%3A%20%27articleRedirect%27&i=nope&files=&repos= | Not in use yet ]], remains in lib for future usage
| die | {icon exclamation-circle color=yellow} | MinervaNeue | Planned to take WikimediaUI ones
| download | {icon check color=green} | Extension:3D |
| folderPlaceholder | {icon exclamation-circle color=yellow} | | Nowhere in use currently
| history | {icon exclamation-circle color=yellow} | | Vaguely planned for VE this coming quarter
| info | {icon check color=green} | OOUI, VE | Help layout; template parameter and media file details
| robot | {icon exclamation-circle color=yellow} | | Added in v0.30.0, planned for CX, see T212299
| tag | {icon check color=green} | VE | as “Categories”
| window | {icon check color=green} | VE | as “Option”
| upload | {icon check color=green} | OOUI | SelectFileWidget
| **Icons – alerts** | {icon check color=yellow} | Notifications, VE | Notifications actually uses a local copy of the icons because of the clutter here
| -- | -- | -- | --
| alert | {icon check color=green} | VE | Page notices and alerts
| bell | {icon check color=green} | Notifications | Notifications actually uses a local copy of this
| message | {icon check color=green} | Notifications | Notifications actually uses a local copy of this
| notice | {icon check color=green} | VE | {icon exclamation-triangle color=yellow} similar as “Alert (Indicators)”; used as “[HTML] Comment” icon in VE
| speechBubble | {icon check color=green} | VE | FeedbackButton, FeedbackLink
| speechBubbleAdd | | |
| speechBubbles | {icon check color=green} | Echo, CX, PageTriage |
| tray | {icon check color=green} | Notifications | Notifications actually uses a local copy of this
| **Icons – interactions** | {icon check color=yellow} | | |
| -- | -- | -- | --
| add | {icon check color=green} | OOUI, VE | "Insert paragraph"; insert transclusion component
| browser | {icon exclamation-triangle color=yellow} in use? | |
| cancel | {icon check color=green} | VE | {icon exclamation-triangle color=yellow} as “Clear styling”
| check | {icon check color=green} | OOUI | Toolbar, Checkbox
| clear | {icon exclamation-triangle color=yellow} in use? | | Could probably be merged with indicator clear, scaling might be a problem
| clock | {icon check color=green} | VE, StructuredDiscussions | VE: MWMediaDialog; StructuredDiscussions: Reorder topics
| close | {icon check color=green} | //VE//, Kartographer | VE: Debug bar only; Kartographer: close full screen
| ellipsis | {icon check color=green} | OOUI | Toolbar
| feedback | {icon check color=green} | MW RCFilters | Added in v0.19.4
| funnel | {icon check color=green} | MW RCFilers, MobileFrontend | MobileFrontend: Filter button in NotificationsInputWidget
| heart | {icon exclamation-triangle color=yellow} in use? | | Even if not in use, should probably stay in a decent icon collection
| help | {icon check color=green} | VE | Help item (for VE toolbar use)
| helpNotice | {icon check color=green} | RCFilters, RevisionSlider | Help icon on black circle aligning to 'alerts', 'notice' icons; added in OOUI v0.28.2
| key | {icon exclamation-triangle color=yellow} in use? | | Even if not in use, should probably stay in a decent icon collection
| keyboard | {icon check color=green} | VE | MWPopupTool
| lightbulb | {icon check color=green} | CX | Used for suggestions in CX dashboard, added in OOUI v0.25.0, see T175006
| logOut |{icon exclamation-circle color=red} in use? | | Should be used in MobileFrontend, which currently uses a custom icon, visually completely off
| newWindow | | | {icon exclamation-triangle color=yellow} very similar to LinkExternal (editing-core, below)
| printer | {icon exclamation-triangle color=yellow} in use? | | Even if not in use, should probably stay in a decent icon collection
| reload | {icon check color=green} | MW RCFilters | Added in v0.23.4, also planned for CX 2
| search | {icon check color=green} | MW, VE | All search TextInputWidgets
| settings | {icon check color=green} | VE et al | Renamed from “advanced” in v0.28.2. Settings, in VE "Advanced settings"
| subtract | {icon check color=green} | OOUI | Added in v0.19.5
| **Icons – moderation** | {icon check color=green} | Notifications, StructuredDiscussions |
| -- | -- | -- | --
| bookmarkOutline | {icon check color=green} | MW RCFilters | Added in v0.21.3, renamed from 'unClip'
| bookmark | {icon check color=green} | MW RCFilters | Added in v0.21.3, renamed from 'clip'
| block | | |
| unBlock | | | Renamed from “blockUndo”, see T148269
| flag | {icon check color=green} | CX | `.cx-tools-link-mark-red`
| unFlag | | | Renamed from “flagUndo”, T148269
| lock | | |
| unLock | | |
| ongoingConversation | | |
| star | {icon exclamation-triangle color=yellow} | | Planned to be used in Vector
| halfStar | {icon exclamation-triangle color=yellow} | | Added in v0.19.1. Plan to be used in VoteNY, T156553
| unStar | | |
| trash | | |
| unTrash | | | Renamed from “trashUndo”, ideas around has been also “Restore” – arguments given in T148269
| pushPin | | | Added in v0.21.3
| **Icons – editing-core**
| -- | -- | -- | --
| edit | {icon check color=green} | VE | Load editor (mobile site), switch to VE (desktop & mobile)
| editLock | | |
| editUndo | | |
| link | {icon check color=green} | VE | Link
| linkExternal | {icon check color=green} | VE | External link; {icon exclamation-triangle color=yellow} very similar to NewWindow (interactions, above)
| linkSecure | {icon exclamation-circle color=red} in use? | |
| redo | {icon check color=green} | VE |
| undo | {icon check color=green} | VE |
| **Icons – editing-styling**
| -- | -- | -- | --
| bigger | {icon check color=green} | VE | `<big>` styling
| smaller | {icon check color=green} | VE | `<small>` styling
| subscript | {icon check color=green} | VE | `<sub>` styling
| superscript | {icon check color=green} | VE | `<sup>` styling
| bold | {icon check color=green} | VE | `<b>` styling
| italic | {icon check color=green} | VE | `<i>` styling
| highlight | {icon check color=green} | MW RCFilters |
| strikethrough | {icon check color=green} | VE | `<s>` styling
| underline | {icon check color=green} | VE | `<u>` styling
| textDirLTR | {icon check color=green} | VE | Language annotation
| textDirRTL | {icon check color=green} | VE | Language annotation
| textStyle | {icon check color=green} | VE | Styling menu
| **Icons – editing-list**
| -- | -- | -- | --
| indent | {icon check color=green} | VE | Lists
| listBullet | {icon check color=green} | VE | Lists
| listNumbered | {icon check color=green} | VE | Lists
| outdent | {icon check color=green} | VE | Lists
| **Icons – editing-advanced**
| -- | -- | -- | --
| alignCenter | {icon check color=green} | VE | Media dialog
| alignLeft | {icon check color=green} | VE | Media dialog
| alignRight | {icon check color=green} | VE | Media dialog
| attachment | {icon check color=green} | MW core | mw.widgets.StashedFileWidget.js
| beaker | | VE | Added in v0.28.1
| calendar |{icon check color=green}|UploadWizard|Get details step
| code | {icon check color=green} | VE | `<code>` styling; could move to editing-styling?
| hieroglyph | | VE | Added in v0.28.1
| language | {icon check color=green} | www.wikipedia.org language button, [[ https://www.mediawiki.org/wiki/Universal_Language_Selector/Design/Interlanguage_links | collapsed language links (in beta) ]], VE | {F4392537} and {F4392547} seem different.
| layout | {icon exclamation-circle color=red} in use? | |
| markup | {icon check color=green} | VE | SyntaxHighlight tool
| mathematics | | VE | Added in v0.28.1
| mathematicsDisplayBlock | | VE | Added in v0.28.1
| mathematicsDisplayDefault | | VE | Added in v0.28.1
| mathematicsDisplayInline | | VE | Added in v0.28.1
| newline |{icon exclamation-circle color=red} in use? | |
| noWikiText | {icon exclamation-circle color=red} seemingly not in use | |
| outline | | |
| puzzle | {icon check color=green} | VE | Templates and extensions, since T111041
| quotes | {icon check color=green} | VE | Search
| searchCaseSensitive | {icon check color=green} | VE | Search
| searchDiacritic | {icon check color=green} | VE | Search, added in v0.19.4
| searchRegularExpression | {icon check color=green} | VE | Search
| signature | {icon check color=green} | VE | Moved from 'icons-alerts' in v0.23.0.
| specialCharacter | {icon check color=green} | VE | Toolbar
| table | {icon check color=green} | VE | Tables
| tableAddColumnAfter | {icon check color=green} | VE | Tables
| tableAddColumnBefore | {icon check color=green} | VE | Tables
| tableAddRowAfter | {icon check color=green} | VE | Tables
| tableAddRowBefore | {icon check color=green} | VE | Tables
| tableCaption | {icon check color=green} | VE | Tables
| tableMergeCells | {icon check color=green} | VE | Tables
| templateAdd | {icon exclamation-circle color=red} seemingly not in use | |
| wikiText |{icon check color=green} | VE | Toolbar for switching
| **Icons – editing-citation** | | Added in v0.27.0
| -- | -- | -- | --
| book | {icon check color=green} | VE > Cite |
| journal | {icon check color=green} | VE > Cite |
| newspaper | {icon check color=green} | VE > Cite |
| web | {icon check color=green} | VE > Cite |
| reference | {icon check color=green} | VE > Cite |
| referenceExisting | {icon check color=green} | VE > Cite |
| references | {icon check color=green} | VE > Cite |
| **Icons – media**
| -- | -- | -- | --
| camera | | | Added in v0.26.0
| chart | | | Added in v0.28.1
| fullScreen | {icon check color=green} | Kartographer |
| image | | VE | `<gallery>`
| imageAdd | | |
| imageLock | | |
| imageGallery | | VE | `<gallery>`
| musicalScore | | VE | Added in v0.28.1
| play | {icon check color=green} | RCFilters: “Live updates” button |
| stop | {icon check color=green} | RCFilters: “Live updates” button |
| zoomIn | | | Added in v0.28.1
| zoomOut | | | Added in v0.28.1
| **Icons – location**
| -- | -- | -- | --
| globe | | | Added in v0.28.2
| map | {icon check color=green} | Kartographer |
| mapPin | {icon check color=green} | Special:UploadWizard |
| mapPinAdd | | |
| mapTrail | | | Renamed from “wikitrail” in v0.20.1
| **Icons – user**
| -- | -- | -- | --
| userActive | | Extension:AdvancedSearch |
| userAvatar | {icon check color=green} | CX | Used in personal header on Content Translation, for logged in users - T160918
| userAnonymous| {icon check color=green} | CX | Used in personal header on Content Translation Stats page, for anonymous users
| userTalk | Extension:AdvancedSearch | |
| **Icons – layout**
| -- | -- | -- | --
| Menu | {icon check color=green} | VE | Toolbar menu
| stripeFlow | | |
| stripeSummary | {icon check color=green} | iOS + Android apps | Wikidata description editing
| stripeToC | {icon check color=green} | StructuredDiscussions | `.flow_block_board-history.handlebars` & `.flow_block_topic*.handlebars`
| viewCompact | {icon exclamation-circle color=red} seemingly not in use | |
| viewDetails | {icon exclamation-circle color=red} seemingly not in use | |
| **Icons – accessibility**
| -- | -- | -- | --
| bright | | |
| halfBright | | |
| notBright | | |
| eye | {icon exclamation-circle color=red} in use? | | For use in accessibility settings?! Deprecated from 'alerts' in v0.23.0 and moved here.
| eyeClosed | {icon exclamation-circle color=red} in use? | | Deprecated from 'alerts' in v0.23.0 and moved here.
| moon | | |
| largerText | | |
| smallerText | | |
| visionSimulator | | |
| **Icons – wikimedia**
| -- | -- | -- | --
| logoCC | | |
| logoWikimediaCommons | ||Might be used in [[ https://www.mediawiki.org/wiki/Extension:FileAnnotations/Design | FileAnnotations ]]
| logoWikimediaDiscovery | Discovery | | {icon exclamation-triangle color=yellow} Discovery team, used for printed t-shirts, was called “betaLaunch” till v0.18.3
| logoWikipedia | ||Might be used in [[ https://www.mediawiki.org/wiki/Extension:FileAnnotations/Design | FileAnnotations ]]
| **Indicators** | {icon check color=green} | OOUI |
| -- | -- | -- | --
| clear | | |
| down | | |
| next | {icon exclamation-triangle color=yellow} to deprecate? | | 1 current usage [[ https://codesearch.wmflabs.org/search/?q=indicator%3A%20%27next%27&i=nope&files=&repos= | Extension:SpellingDictionary ]]
| previous | {icon exclamation-triangle color=yellow} to deprecate? | | 0 current usage
| required | | |
| search | | |
| up | | |
| **Textures** |
| -- | -- | -- | --
| pending | {icon exclamation-circle color=red} deprecated, replaced by CSS-only solution | OOUI | formerly PendingElement |
| transparency | {icon exclamation-circle color=red} in use? | | |
---
**Removed icons/indicators over course of time:**
| Icon name | intentional use/comment
| -- | --
| ~~**Icons – core**~~ | {icon exclamation-triangle color=red} Removed in v0.22.0, icons here were moved to other packs
| -- | --
| ~~**Icons - alert**~~
| -- | --
| bellOn | {icon exclamation-triangle color=red} Removed in v0.26.0. See T145163
| comment | {icon exclamation-triangle color=red} Removed in v0.28.0 as it was merged with 'speechBubble'
| ~~**Icons – movement**~~
| -- | --
| caretLast | {icon exclamation-triangle color=red} Removed in v0.23.0, merged with 'previous', 'next', 'collapse', 'expand'
| caretNext | {icon exclamation-triangle color=red} Removed in v0.23.0, merged with 'previous', 'next', 'collapse', 'expand'
| caretDown | {icon exclamation-triangle color=red} Removed in v0.23.0, merged with 'previous', 'next', 'collapse', 'expand'
| caretUp | {icon exclamation-triangle color=red} Removed in v0.23.0, merged with 'previous', 'next', 'collapse', 'expand'
|~~**Icons – editing-advanced**~~
| -- | --
| find | {icon exclamation-triangle color=red} Removed in v0.28.0. Search; merged with 'articleSearch' in 'content'.
| quotesAdd | {icon exclamation-triangle color=red} Removed in v0.26.0
|~~**Icons – interaction**~~
| -- | --
| ~~bookmark~~ | {icon exclamation-triangle color=red} Removed in v0.22.0
| settings | {icon exclamation-triangle color=red} Removed in v0.28.0. Replaced by 'pageSettings'.
| sun | {icon exclamation-triangle color=red} Removed in v0.24.0
| watchlist | {icon exclamation-triangle color=red} Removed in v0.24.0.
| ~~**Icons – media**~~
| -- | --
| photoGallery | {icon exclamation-triangle color=red} Removed in v0.18.0, deprecated alias of ImageGallery
| ~~**Indicators**~~
| -- | --
| alert | {icon exclamation-triangle color=red} Removed in v0.27.0. See T185158