Background
As part of this ticket T400946 and the Reading list experiment on web we need an icon that would allow users to access their saved list of articles.
Known use case(s):
Currently the apps use "cdxIconBookmark" icon in the tabs to access saved list of articles as shown below:
However, this icon cannot be used on web due to having the bookmark icon also visible above articles (to save articles), which would result in two bookmark icons on the same screen as shown below:
And so the proposal is to create a new icon to access saved list on web similar to watchlist icon "cdxIconWatchlist" but with a bookmark instead of star as shown below:
 |  |
Considerations: Will this icon be distinguishable from watchlist icon at certain sizes.
User stories
As a designer, I need an icon that we can use on web to access saved content
Open questions
- Will the proposed icon be too similar to watchlist at a certain size? Yes, We made edits to the bookmark icon and the list line width to further differentiate it from the watch list icon.
- Are there other options we can explore? Yes, other options were explored however we decided to stick to the icon style we have for other user lists like "watchlist" and "contributions" and come back to revising if needed as part of the larger icon consistency project that @DTorsani-WMF is working on.
Design proposal
The design of this icon is inspired by other existing user list icons such as "watchlist" and "contributions" on Web. We decided to not use the Bookmark icon (used by apps) to access saved list on web because the Bookmark icon is used as an action to save the article in very close proximity to where the BookmarkList icon may appear and may cause user confusion. In the future, we plan to align the icons across platforms but for now we decided to go with the following design.
SVG icon
Once the icon has been created, we will export it in SVG format and add it here.
Acceptance criteria for Done
Design
- The design of the new icon is ready, and it follows the icon guidelines
- An RTL icon has been created (if needed)
- The icon is recognizable on low DPI resolutions
- The icon has been exported as an optimized SVG and added to this task’s description
- The new icon has been included and published in the Codex Figma library
Code
- Add icon in Codex
- Add icon in OOUI
Documentation