WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 21 months ago

Last modified 3 months ago

#30902 closed task (blessed) (fixed)

Create new dashicons (4.3)

Reported by: EmpireOfLight Owned by: melchoyce
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.1
Component: Administration Keywords: has-patch needs-refresh
Focuses: ui, administration Cc:

Description (last modified by SergeyBiryukov)

This is a follow-up to #29444, which ended with @liljimmi listing an inventory of old and new unfulfilled requests for the next ticket:

  • "Sticky" icon for posts
  • "Move" icon
  • Email (using the @ sign)
  • Automattic products mini-logos
  • LinkedIn and other missing social network icons
  • Exclamation mark icon
  • Icons for different currencies. Such as $, €, £ etc.
  • A loading icon to replace the current gif loading icon (still in debate)
  • A table icon for TinyMCE and a dashicon variant for each icon in the TinyMCE icon font.
  • A filter icon
  • An animal icon (for zoo websites, pet shops, etc.)
  • Icon for WordPress Multisite
  • Icons to represent CSS ( e.g. {} ) and shortcodes e.g. [] )
  • PDF icon
  • A page icon that wasn't filled/solid like the Dashicons '\f498' is (something like Noticons '\f443').
  • A paperclip
  • A light bulb with rays to indicate it's on (this would complement Dashicons '\f339')

Can we divvy these up? I've already made sticky posts. Anyone care to jump in on the others?

Also, what's the flow going to be for submitting new dashicons? We've discussed moving toward SVG sprite, for 4.2. This will hopefully make it easier to submit and discuss new icons.

Attachments (24)

post-sticky.svg (1.1 KB) - added by EmpireOfLight 2 years ago.
Design for sticky post icon
dashicons-new_11-10-14.ai (361.5 KB) - added by melchoyce 2 years ago.
dashicons-rotate.svg (826 bytes) - added by liljimmi 2 years ago.
Rotate Dashicon for Image Flow
dashicons-rotate.ai (53.0 KB) - added by liljimmi 2 years ago.
Rotate Dashicon for Image Flow - AI
dashicons-rotate.png (6.9 KB) - added by liljimmi 2 years ago.
Rotate Dashicon for Image Flow - PNG
icon-milling-cutter.png (1.7 KB) - added by cadproadmin 2 years ago.
dashicons-hidden.ai (380.6 KB) - added by melchoyce 23 months ago.
dashicons-hidden-preview.png (23.6 KB) - added by melchoyce 23 months ago.
dashicons-thumbs.ai (371.8 KB) - added by melchoyce 23 months ago.
dashicons-thumbs-preview.jpg (24.4 KB) - added by melchoyce 23 months ago.
dashicons-unlocked.ai (50.6 KB) - added by liljimmi 21 months ago.
Unlocked version of dashicons-lock
dashicons-unlocked.svg (1.1 KB) - added by liljimmi 21 months ago.
Unlocked version of dashicons-lock SVG
unlocked.png (13.0 KB) - added by liljimmi 21 months ago.
Unlocked version of dashicons-lock Preview
image-filter-in-sidebar.png (6.2 KB) - added by EmpireOfLight 21 months ago.
2 options for image filter, shown in admin sidebar
dashicons-preview.png (197.4 KB) - added by EmpireOfLight 21 months ago.
Latest version of Dashicons. Please review and make sure we don't need to add/delete any.
30902.patch (68.2 KB) - added by liljimmi 21 months ago.
CSS for new Dashicons
fonts.zip (102.5 KB) - added by liljimmi 21 months ago.
Font files with new Dashicons
30902-2.patch (68.2 KB) - added by liljimmi 21 months ago.
CSS for new Dashicons - includes .dashicons-layout missing from last patch
30902-3.patch (67.9 KB) - added by liljimmi 21 months ago.
Removed typo from .dashicons-layout. Changed .dashicons-admin-filter to .dashicons-filter and .dashicons-lock-unlock to .dashicons-unlock
30902.diff (251.8 KB) - added by obenland 21 months ago.
30902.4.patch (68.0 KB) - added by liljimmi 21 months ago.
Added thumbs down icons
fonts-2.zip (102.5 KB) - added by liljimmi 21 months ago.
New font files including thumbs down
30902.5.patch (68.4 KB) - added by liljimmi 21 months ago.
Fixed thumbs-down class and added hypnens to hyphens to thumbs-up/down icon classes
fonts-3.zip (103.5 KB) - added by liljimmi 21 months ago.
Changed thumbs down unicode to remove decimals, which breaks the css that displays the icon

Change History (93)

@EmpireOfLight
2 years ago

Design for sticky post icon

#1 @SergeyBiryukov
2 years ago

  • Description modified (diff)
  • Focuses ui administration added

#2 @melchoyce
2 years ago

I had a couple other icons in the last thread which didn't make it into 4.1 (image filter, warning, table, filter, and sticky post). They could use another set of eyes for consistency and style. I'll reattach them here.

For now, let's hold off on making more new icons until we've had a chance to meet and discuss the plans outlined here: https://make.wordpress.org/design/2015/01/04/the-future-of-dashicons/

#3 @ocean90
2 years ago

#31059 was marked as a duplicate.

#4 @joelworsham
2 years ago

#31079 was marked as a duplicate.

#5 @joelworsham
2 years ago

  • Version set to 4.1

There's a dashicon named "visibility", that is an eye. It would be great if there was a dashicon that was something like an eye with a line through it, or a closed eye, or something to imply "hidden" or "not visible".

#6 @SergeyBiryukov
2 years ago

#31125 was marked as a duplicate.

#7 @mcselasvegas
2 years ago

I would like to see a thumbs up and thumbs down icon added to the list

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


2 years ago

#9 @melchoyce
2 years ago

  • Summary changed from Dashicons development to Create new dashicons (4.2)

#10 @dd32
2 years ago

#31207 was marked as a duplicate.

@liljimmi
2 years ago

Rotate Dashicon for Image Flow

@liljimmi
2 years ago

Rotate Dashicon for Image Flow - AI

@liljimmi
2 years ago

Rotate Dashicon for Image Flow - PNG

#12 @philip.coombes
2 years ago

Please could you add the aircraft icon as it would work perfectly for the aircraft for sale custom post type I am working on.

#13 @cadproadmin
2 years ago

Any chance of creating a little Milling tool icon? Something like this would be perfect:

<< I don't have permission to use this particular one though.

#14 @brightsidew3
2 years ago

Hi.

I hope you can help.
I would love you to create a spray can icon for me.
Something like this would be perfect.

http://www.daisybankdesign.co.uk/wp-content/uploads/2015/04/spray-can.png

Thank you very much.
Regards,
Paul

#15 @melchoyce
23 months ago

  • Summary changed from Create new dashicons (4.2) to Create new dashicons (4.3)

Suggestion from #32200: TripAdvisor icon

Suggestion from #32169: A travel or aviation-related icon, like an airplane

Suggestion from #31079: Crossed out eye, opposite of visible

Suggestion from #31059:

Suggestion from #31125: Thumbs up, thumbs down

Suggestion from https://wordpress.slack.com/archives/design/p1431196199000010: Warning

Once we restart Dashicons meetings next week, we can make a better plan for tackling new icons this cycle. In the meantime, I'm switching this ticket to be for 4.3, since we never got around to it for 4.2.

#16 @melchoyce
23 months ago

#32200 was marked as a duplicate.

#17 @melchoyce
23 months ago

#32169 was marked as a duplicate.

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


23 months ago

#20 @SergeyBiryukov
23 months ago

  • Milestone changed from Awaiting Review to 4.3

#21 @melchoyce
23 months ago

dashicons-thumbs.ai contains thumbs up and thumbs down. The icons are adapted from Open Iconic (https://useiconic.com/open/), licensed under the MIT License. I've tweaked the icon sizing and adjusted the points to adapt to Dashicon's 20px grid. Preview in dashicons-thumbs-preview.jpg

This ticket was mentioned in Slack in #core-passwords by binarykitten. View the logs.


22 months ago

#23 @mkormendy
22 months ago

I like the cute carrot icon to represent food, it's context-focused, maybe too much. I think a plate, knife and "spork" could help define things like restaurants and eating.

Something in the fashion of the following might be nice:
https://cdn4.iconfinder.com/data/icons/service/500/tableware_plate_knife_fork_heart_cook_cooking_eat_eating_food_spoon-512.png

#24 @melchoyce
22 months ago

#32614 was marked as a duplicate.

#25 @dd32
21 months ago

#26 @dd32
21 months ago

#32568 was marked as a duplicate.

#27 @obenland
21 months ago

  • Owner set to melchoyce
  • Status changed from new to assigned

#28 @obenland
21 months ago

@melchoyce, is there anything you anticipate would be ready for 4.3?

#29 follow-up: @melchoyce
21 months ago

There's a couple in here that could likely make it in for this cycle. I'll check in with @empireoflight.

#30 in reply to: ↑ 29 @liljimmi
21 months ago

Are there any that need making?

#31 follow-up: @melchoyce
21 months ago

Last night we started working on a Customizer icon for #32678 (https://wordpress.slack.com/archives/design/p1434596260000082). That could use some more eyes, and ideas.

An open lock based on the lock Dashicon could also be good to get in this cycle, since we have the base to work from.

At the end of the cycle, let's audit the list of icons and prune out the ones we don't think are appropriate.

#32 in reply to: ↑ 31 @liljimmi
21 months ago

Sounds good, we can figure which ones to prune at one of our Slack meetings.

I can work on the lock :-)

#33 @EmpireOfLight
21 months ago

Sorry I haven't been much help on these; let me know what the final vector files are ready and I'll update the font.

#34 @paulwilde
21 months ago

See #32733 and #32734.

I think a dashicons-plus-alt needs to exist which has the same thickness as dashicons-no-alt.

Last edited 21 months ago by paulwilde (previous) (diff)

#35 @melchoyce
21 months ago

#32748 was marked as a duplicate.

#36 @obenland
21 months ago

@melchoyce, any news? If there is no need for new icons in 4.3, we can just reassign to 4.4.

#37 follow-up: @melchoyce
21 months ago

Sorry, I've been sick the past couple days. We can discuss this in Dashicons chat later today.

#38 in reply to: ↑ 37 @liljimmi
21 months ago

I'll make the lock one now.

@liljimmi
21 months ago

Unlocked version of dashicons-lock

@liljimmi
21 months ago

Unlocked version of dashicons-lock SVG

@liljimmi
21 months ago

Unlocked version of dashicons-lock Preview

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


21 months ago

#40 @melchoyce
21 months ago

Based on our chat today (https://wordpress.slack.com/archives/design-dashicons/p1435257113000004), we've decided to add these icons for 4.3:

@empireoflight, could you add these icons to the font before 4.3 beta 1, and maybe take a look at smoothing a couple of them out before they go in? In particular, I'm unsure about the ones I made in dashicons-new_11-10-14.ai and dashicons-thumbs.ai

Last edited 21 months ago by melchoyce (previous) (diff)

#41 follow-up: @EmpireOfLight
21 months ago

https://github.com/melchoyce/dashicons is updated. There are 2 image filter icons. @melchoyce design was losing clarity at actual size, so I did one with three separate circles. I only previewed them in photoshop so the best way to compare them would be actually loading them into the admin. Where will this appear so we can see it in context?

Last edited 21 months ago by EmpireOfLight (previous) (diff)

@EmpireOfLight
21 months ago

2 options for image filter, shown in admin sidebar

#42 @melchoyce
21 months ago

The bottom one feels more clear in this context to me. Let's nix the top.

#43 in reply to: ↑ 41 ; follow-up: @liljimmi
21 months ago

What are the Unicodes for all the new icons?

@EmpireOfLight
21 months ago

Latest version of Dashicons. Please review and make sure we don't need to add/delete any.

#44 in reply to: ↑ 43 ; follow-up: @EmpireOfLight
21 months ago

Replying to liljimmi:

What are the Unicodes for all the new icons?

See my screenshot.

#45 in reply to: ↑ 44 @liljimmi
21 months ago

Thank you :-)

#46 follow-up: @EmpireOfLight
21 months ago

Also, can the thumbs-up be flipped w/CSS for thumbs-down, or do we also need a thumbs-down icon?

#47 in reply to: ↑ 46 ; follow-up: @liljimmi
21 months ago

CSS transform wont work in IE < 9. Is that a concern?

#48 in reply to: ↑ 47 @melchoyce
21 months ago

Replying to liljimmi:

CSS transform wont work in IE < 9. Is that a concern?

It feels like enough of a concern, IMO.

This ticket was mentioned in Slack in #core by obenland. View the logs.


21 months ago

#50 @obenland
21 months ago

  • Keywords needs-patch added
  • Type changed from enhancement to task (blessed)

This needs to be in before the weekend, preferably before beta1.

@liljimmi
21 months ago

CSS for new Dashicons

@liljimmi
21 months ago

Font files with new Dashicons

@liljimmi
21 months ago

CSS for new Dashicons - includes .dashicons-layout missing from last patch

#51 follow-up: @melchoyce
21 months ago

Seeing a typo in the patch:

.dashicons-layout:before { 
content: "\ff538"; 
}

The second "f" should be removed.

Do you know if .dashicons-exerpt-view:before, /* Misspelled. Use .dashicons-excerpt-view instead. */ was intentionally removed? We should ideally deprecate that eventually, but I figured we'd do that kind of cleanup when we move over to SVG.

.dashicons-admin-filter should probably just be .dashicons-filter since it's not specifically going into the admin menu.

Likewise, .dashicons-lock-unlock should probably just be .dashicons-unlock.

Sorry, should have caught these earlier. Do you want me to edit your patch, or do you have time to revisit it today? I don't want to take up too much of your time.

#52 follow-up: @obenland
21 months ago

Anyone other than @liljimmi who should get props on the commit?

#53 @obenland
21 months ago

  • Keywords has-patch needs-refresh added; needs-patch removed

#54 in reply to: ↑ 52 @melchoyce
21 months ago

Replying to obenland:

Anyone other than @liljimmi who should get props on the commit?

Should be @liljimmi, @empireoflight, and I for this release.

#55 in reply to: ↑ 51 ; follow-up: @liljimmi
21 months ago

I'll make a new patch now.

Do you know if .dashicons-exerpt-view:before, /* Misspelled. Use .dashicons-excerpt-view instead. */ was intentionally removed?

I think that may have been in trunk, but not in Git?
I'll add that back.

#56 in reply to: ↑ 55 @melchoyce
21 months ago

Replying to liljimmi:

I'll make a new patch now.

Thanks!

Do you know if .dashicons-exerpt-view:before, /* Misspelled. Use .dashicons-excerpt-view instead. */ was intentionally removed?

I think that may have been in trunk, but not in Git?
I'll add that back.

Yeah, nothing really ever moves back to the Github repo from trunk. We should probably just shut it down now that we're using https://developer.wordpress.org/resource/dashicons/ for the demo.

@liljimmi
21 months ago

Removed typo from .dashicons-layout. Changed .dashicons-admin-filter to .dashicons-filter and .dashicons-lock-unlock to .dashicons-unlock

#57 @melchoyce
21 months ago

30902-3.patch looks good to go! Thanks for pushing that through today, @liljimmi. :)

@obenland
21 months ago

#58 @melchoyce
21 months ago

#32874 was marked as a duplicate.

This ticket was mentioned in Slack in #core by obenland. View the logs.


21 months ago

@liljimmi
21 months ago

Added thumbs down icons

@liljimmi
21 months ago

New font files including thumbs down

This ticket was mentioned in Slack in #design-dashicons by liljimmi. View the logs.


21 months ago

@liljimmi
21 months ago

Fixed thumbs-down class and added hypnens to hyphens to thumbs-up/down icon classes

@liljimmi
21 months ago

Changed thumbs down unicode to remove decimals, which breaks the css that displays the icon

#61 @ocean90
21 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 33108:

Dashicons: Update to the latest files.

New icons:

  • .dashicons-admin-customizer (f540)
  • .dashicons-admin-multisite (f541)
  • .dashicons-editor-table (f535)
  • .dashicons-filter (f536)
  • .dashicons-hidden (f530)
  • .dashicons-image-filter (f533)
  • .dashicons-image-rotate (f531)
  • .dashicons-layout (f538)
  • .dashicons-sticky (f537)
  • .dashicons-thumbs-down (f542)
  • .dashicons-thumbs-up (f529)
  • .dashicons-unlock (f528)
  • .dashicons-warning (f534)

Updated icons:

  • .dashicons-plus (f132)
  • .dashicons-yes (f147)

props liljimmi, melchoyce, empireoflight.
fixes #30902.

#62 @ocean90
21 months ago

In 33126:

Dashicons: Update to the latest files.

Revert the updates to .dashicons-plus (f132) in [33108] and instead introduce a new icon, .dashicons-plus-alt2 (f543).

props liljimmi, melchoyce, empireoflight.
see #30902.

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


21 months ago

#64 @ocean90
21 months ago

In 33150:

Customizer: Use the new dashicon for the Preview/Customize toggle in narrow screens.

see #30902, #28784.

#65 @melchoyce
20 months ago

#33075 was marked as a duplicate.

#66 @melchoyce
20 months ago

Suggestion from #33075: move/drag icon.

#67 @levelfourstorefront
20 months ago

love the dashicons, still no 'printer' icon...

This ticket was mentioned in Slack in #design-dashicons by melchoyce. View the logs.


19 months ago

#69 @icons8
3 months ago

If you guys ever need new icons, we, Icons8, are willing to donate or draw the new ones.

From what I see here, our Material icon pack would work great, providing the missing icons (such as Print) or improving some of the icons like this: http://take.ms/d27Yf

Note: See TracTickets for help on using tickets.