| JnpoJuwan | |
| Sep 19 2025, 7:46 AM |
| F94527201: academia.svg | |
| Sun, Jul 19, 1:22 AM |
| F94527149: academia.png | |
| Sun, Jul 19, 1:22 AM |
| F94525640: studentNewspaper.svg | |
| Sun, Jul 19, 12:50 AM |
| F94525639: government all.svg | |
| Sun, Jul 19, 12:50 AM |
| F94525638: government.svg | |
| Sun, Jul 19, 12:50 AM |
| F94525599: studentNewspaper.png | |
| Sun, Jul 19, 12:50 AM |
| F94523244: articles.png | |
| Sun, Jul 19, 12:50 AM |
| F94523245: article.png | |
| Sun, Jul 19, 12:50 AM |
The icons for Cite Unseen are sourced from several sources, including the Noun Project, FontAwesome and usermade icons. Additionally, the icon colours are class-skin inverted in dark mode. This results in an inconsistent design language.
These should be incorporated into the Codex design system used in other projects. This requires that new symbols be added for missing concepts.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T141801 WikimediaUI theme (Codex/OOUI) icon inventory (tracking) | |||
| Open | Chaotic_Enby | T405065 Update "Cite Unseen" extension icons |
Pinging @Chaotic_Enby after their great work on the Codex icon refinements, if they wish to take this up.
heyyyyy 😎
Well I'm definitely interested now! Thinking of the more recent additions to CiteUnseen as a concrete example, I know that there have been multiple proposals for the "robot" icon and it isn't really clear which one is going to be used in T427868, so that's a baseline to consider. For example, the latest demo uses a top-heavy version not too dissimilar to the "umbrella" version previously replaced by the head-first one in T399175.
@DTorsani-WMF , you said in T399175#11942067 that "how the robot is represented in the Cite Unseen tool" was taken into consideration, can you provide me with more details in that regards so we don't have to reinvent the wheel? I believe the head-first version is the most similar to (and easier to integrate with) the current slate of CiteUnseen robot icons?
I'll note that we currently have 24 Cite Unseen icons, some of which have acceptable Codex substitutes. I am relying on this demo as the most up-to-date icon set available.
| CU icon | CU code | Codex icon | Codex code | Notes |
|---|---|---|---|---|
| {F93048622, width=20} | advocacy | {F93044511, width=20} | feedback | Has RTL variant. |
| {F93048635, width=20} | books | {F93044700, width=20} | book | |
| {F93048692, width=20} | blogs | None | None | We sadly don't really have a RSS feed-like icon, network is superficially similar but not semantically understood in the same way at all. Not familiar enough with RSS feed iconography in RTL writing systems to state if it should have a variant. |
| {F93048651, width=20} | community | {F93044770, width=20} | userGroup | I'm not confident we can, or should try to, fit three people in 20x20 pixels. Has RTL variant. |
| {F93052649, width=20} | editable | {F93045157, width=20} | edit | This icon may lead to confusion as it usually implies that the end user can edit the relevant part of the page. A version inside a page rectangle (equivalent to diffs with a single page) could be an alternative. |
| {F93052669, width=20} | government | None | None | Sadly, "standard neoclassical building" isn't an icon yet, although it could realistically fit in the set. Western-centrism is to be considered in the realization, however. flag has appealing national connotations, but will more likely be read as meaning the source has been flagged in some way. |
| {F93052722, width=20} | news | {F93045248, width=20} | newspaper | Has RTL variant. |
| {F93052738, width=20} | opinion | {F93045268, width=20} | articleNotFound | Completely different intent, but broadly understandable here. Ideal would be to fit a similar question mark in the speechBubble icon, if space allows for it. Both have RTL variants. |
| {F93052962, width=20} | press | None | None | Cite Unseen uses this icon for press releases specifically. Beyond Wikimedia, press release icons often include a megaphone, but that is already taken. A business icon (briefcase or other easily read symbol) would be helpful here. |
| {F93052979, width=20} | satire | None | None | As funny as it would be, we're not using userTalk which is mostly associated with "thanks" (positive/sincere connotation). |
| {F93052996, width=20} | social | {F93045296, width=20} | speechBubbles | That, or we put a hashtag in speechBubble to make it more clear. Both have RTL variants. |
| {F93053020, width=20} | sponsored | None | None | We don't have any money-related icons in the set yet (which, in a way, is a pleasant surprise). |
| {F93053161, width=20} | tabloids | {F93045511, width=20} | userChat | Has RTL variant. |
| {F93053179, width=20} | tvPrograms | None | None | Used for both TV and radio programs. play (a simple triangle) may be too confusing when removed from its standard set, while live may be too broad, more often being associated with streaming services (although a small variant could make it a more fitting "broadcast" icon). For something that includes both, a television is a better default icon than the existing microphone, and we don't have one yet (No Wikipedia app for smart TV? What are you even doing?) |
| {F93053193, width=20} | aiGenerated | None | None | Depends on which robot icon ends up being chosen. |
| {F93053204, width=20} | aiReferred | None | None | Same as above. |
| {F93053217, width=20} | predatory | None | None | So the plan here is to fit a legible, 2px thick cross in the book icon. Will have just enough chirality to justify an RTL variant. |
In my mind, the goal is more of a semantic match than a pictorial one. Thus why, for example, the very differently-shaped newspaper from Codex works as an acceptable substitute here.
For reliability ratings, we can go two ways. Either we aim for consistent icon weights, or for a natural progression that is consistent with the severity of the rating, i.e. generally reliable sources would have the lightest icon and blacklisted sources the heaviest one. This does not always match the existing Codex icons: the closest match to marginallyReliable in shape is alert, but notice is clearly semantically preferable under that logic.
A deeper issue arises with deprecated and blacklisted, where the current Cite Unseen icons already give the impression that deprecation is more severe than blacklisting (besides the color factor) for an unfamiliar user, and in general make all three hard to distinguish (e.g. the "blacklisted" icon is a visual counterpart to the "generally reliable" one). This is replicated in their Codex equivalents, where clear is only outlined, whereas error (more desirable than hand in terms of consistency). Given how many users are already used to the current set of icons, I don't want them to be swapped too much, but having a filled version of clear would be helpful in that regards.
| CU icon | CU code | Codex icon (full weight) | Codex code | Codex icon (var. weight) | Codex code | Notes |
|---|---|---|---|---|---|---|
| {F93053397, width=20} | generallyReliable | {F93045531, width=20} | success | None | None | For the latter, we would need an outlined version of success |
| {F93053460, width=20} | marginallyReliable | {F93045556, width=20} | alert | {F93045577, width=20} | notice | alert is closer in shape than notice, but both its shape and icon weight are less desirable for a "middle of the ground" classification. |
| {F93053471, width=20} | generallyUnreliable | None | None | {F93046101, width=20} | cancel | A filled version of cancel would be very awkward, and easily confused with block. Part of why I prefer variable weights |
| {F93053485, width=20} | deprecated | {F93046130, width=20} | error | {F93046130, width=20} | error | We lose the hand, which is honestly not too bad at that scale for symbolic icons. |
| {F93053520, width=20} | blacklisted | {F93046160, width=20} | block | {F93046160, width=20} | block | Alternative for both would be a filled version of clear |
| {F93053559, width=20} | multi | None | None | {F93046185, width=20} | helpNotice | Preferable to help for consistency with the above icon designs. Full weight not available. Has RTL variant. |
| {F93053580, width=20} | unknown | {F93046185, width=20} | helpNotice | {F93046185, width=20} | helpNotice | These two may need to use different icons, both for easier understanding and for colorblind accessibility. If we use a full weight set for known ratings, having unknown be outline-only could help with this. |
@DTorsani-WMF (sorry for the bother again), which font is used for the question mark in icons? I'm trying to make one that's slightly smaller to have enough clearance around the outlines of the speech bubble, but want to keep it consistent!
@Chaotic_Enby In regards to the robot icon and its relation to the Cite Unseen robot icons, there was a version in the new icons that attempted to match the bodiless version that is in Cite Unseen. However, there was a lot of controversy around this one, so we went with a revised bodied version with some slight amendments that were a part of some other work.
For the question mark in the help icons, that is custom drawn. If you need a smaller one, reference the one in helpNotice which is smaller.
Now, the awaited icon proposals. They all have a codex-base version as they can and should stand as generic icons. Cite Unseen maintainers are free to pick add Codex-friendly colors that will carry relevant semantic meaning, with this reference for color tokens.
In continuity with existing practice, I suggest color-error for categories that most likely disqualify a source (e.g. aiGenerated, editable or predatory), color-warning for categories that require extra caution (e.g. press or aiReferred), and black for categories that do not negatively impact reliability (e.g. news, or books), keeping in mind that no category automatically guarantees a source will be reliable.
| CU icon | CU code | Proposed Codex icon | Proposed Codex code | Notes |
|---|---|---|---|---|
| {F93048692, width=20} | blogs |  | feed | Uses arcs with 3px line thickness and spacing. |
| {F93052649, width=20} | editable |  | edit | Same pencil size as the diffs icon, the slight increase in space likely doesn't justify an icon adjustment. |
| {F93052669, width=20} | government |  | government | I'd love to avoid the cultural bias, but conveying the concept of government without picking either a specific architecture style (which means we have to make a choice) or an abstract symbol like the scales of justice (unduly giving trust to government sources) isn't really feasible. |
| {F93052738, width=20} | opinion |  | speechBubbleQuestion | The helpNotice question mark is sadly borderline here in terms of height. |
| {F93052962, width=20} | press |   | briefcase | I can see this being used for broader company-related situations, such as COI editors. |
| {F93052979, width=20} | satire |  | mask | Does the userTalk face fit here? Not sure, but I had to do it. |
| {F93052996, width=20} | social |  | speechBubbleHashtag | |
| {F93053020, width=20} | sponsored |   | bill/bills | More cultural bias avoidance, here trying to not go for a $ sign but for a generic money bill. There's also a bills version in case the original one looks like a movie ticket. |
| {F93053179, width=20} | tvPrograms |   | television | Also made a variant that is turned off. |
| {F93053193, width=20} | aiGenerated |  | aiGenerated | |
| {F93053204, width=20} | aiReferred |  | aiReferred | |
| {F93053217, width=20} | predatory |  | crossedBook | Main worry being that it might be a bit too specific. Not enough space to have the book outline on both sides, even with 1px less in cross length. |
| {F93053397, width=20} | generallyReliable |  | successOutline | If we go with variable weight only. |
| {F93053471, width=20} | generallyUnreliable |  | cancelFilled | If we go with full weight only. Quite awkward and easy to confuse for the "block" sign. |
| {F93053520, width=20} | blacklisted |  | clearFilled | |
| {F93053559, width=20} | multi |  | helpNoticeFilled | If we go with full weight only. |
Great stuff, thanks for taking this on @Chaotic_Enby !
For the reliability icons, what we currently use is based on RSP's icons. Whatever icons we end up with hopefully will work and be used by RSP as well.
There's been strong interest from Cite Unseen users for both academic + student newspaper categories as well (see the new academic institutions and student publications source lists). We currently plan to use a graduation cap / mortarboard to represent academia (I don't think that's currently in Codex, but probably useful in general?).
Student newspaper is a bit trickier. We could use the newspaper and graduation cap next to each other. I've also been experimenting with having a newspaper "wear" a graduation cap. A bit goofy but I think it works for the sake of Cite Unseen (a bit tricky to make it look good on a small scale, and it may be too niche for Codex?).
Oh, also just noting that we've also debated the government icon over the years for the reasons noted above and came to the same conclusion, that it's hard to otherwise represent government. Scale could work but suggests bias/balance or otherwise something related to the judiciary specifically. A flag conveys many meanings, including that something may be being "flagged" as an issue. An icon like this may be a bit more "balanced" (a dome with a flag, instead of the more neoclassical icon) -- and the added benefit that it won't be confused with the Internet Archive's logo, heh. But I'll probably still lean towards the status quo for the sake of minimizing change + the current neoclassical icon renders well at a small scale, I think.
Thanks a lot for the feedback @SuperHamster ! For the government icon, I toyed with a dome version, alongside a flag atop either, but the resolution of the icon made it nigh-unreadable.
Domes themselves are already a bit tricky. There are four ways we can fit the dome shape in the icon:
If we want a rounded dome, I'd go with a compromise between the third and fourth option. It's subtly different from its more triangular cousin, while not registering as either a burger or a US Capitol ripoff.
I do also like the student newspaper idea! Codex tends to simplify the icon's text when shrinking the icon (compare article and articles).
The cap might be a bit goofy above the newspaper itself, but I've tried putting it inside the newspaper in place of some of the text. The two main issues (besides the fact that studentNewspaper is quite a specific concept) are that:
Using the newspaper icon as a base is even more jarring (as the fold of the newspaper contrasts with the tail of the cap), and sadly doesn't provide enough space for anything readable.
As always, the SVG files:
And that's how I got so laser-focused on the student newspaper that I missed the broader academia one!
Ironically, trying to keep something legible in the outline style, and optimizing for this size, means I end up with a result quite a bit removed from the one in the studentNewspaper icon!
