WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 6 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 2 years ago.
dashicons-hidden-preview.png (23.6 KB) - added by melchoyce 2 years ago.
dashicons-thumbs.ai (371.8 KB) - added by melchoyce 2 years ago.
dashicons-thumbs-preview.jpg (24.4 KB) - added by melchoyce 2 years ago.
dashicons-unlocked.ai (50.6 KB) - added by liljimmi 2 years ago.
Unlocked version of dashicons-lock
dashicons-unlocked.svg (1.1 KB) - added by liljimmi 2 years ago.
Unlocked version of dashicons-lock SVG
unlocked.png (13.0 KB) - added by liljimmi 2 years ago.
Unlocked version of dashicons-lock Preview
image-filter-in-sidebar.png (6.2 KB) - added by EmpireOfLight 2 years ago.
2 options for image filter, shown in admin sidebar
dashicons-preview.png (197.4 KB) - added by EmpireOfLight 2 years 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 2 years ago.
CSS for new Dashicons
fonts.zip (102.5 KB) - added by liljimmi 2 years ago.
Font files with new Dashicons
30902-2.patch (68.2 KB) - added by liljimmi 2 years ago.
CSS for new Dashicons - includes .dashicons-layout missing from last patch
30902-3.patch (67.9 KB) - added by liljimmi 2 years 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 2 years ago.
30902.4.patch (68.0 KB) - added by liljimmi 2 years ago.
Added thumbs down icons
fonts-2.zip (102.5 KB) - added by liljimmi 2 years ago.
New font files including thumbs down
30902.5.patch (68.4 KB) - added by liljimmi 2 years 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 2 years 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
2 years 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
2 years ago

#32200 was marked as a duplicate.

#17 @melchoyce
2 years ago

#32169 was marked as a duplicate.

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


2 years ago

#20 @SergeyBiryukov
2 years ago

  • Milestone changed from Awaiting Review to 4.3

#21 @melchoyce
2 years 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.


2 years ago

#23 @mkormendy
2 years 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
2 years ago

#32614 was marked as a duplicate.

#25 @dd32
2 years ago

#26 @dd32
2 years ago

#32568 was marked as a duplicate.

#27 @obenland
2 years ago

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

#28 @obenland
2 years ago

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

#29 follow-up: @melchoyce
2 years 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
2 years ago

Are there any that need making?

#31 follow-up: @melchoyce
2 years 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
2 years ago

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

I can work on the lock :-)

#33 @EmpireOfLight
2 years 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
2 years 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 2 years ago by paulwilde (previous) (diff)

#35 @melchoyce
2 years ago

#32748 was marked as a duplicate.

#36 @obenland
2 years 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
2 years 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
2 years ago

I'll make the lock one now.

@liljimmi
2 years ago

Unlocked version of dashicons-lock

@liljimmi
2 years ago

Unlocked version of dashicons-lock SVG

@liljimmi
2 years ago

Unlocked version of dashicons-lock Preview

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


2 years ago

#40 @melchoyce
2 years 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 2 years ago by melchoyce (previous) (diff)

#41 follow-up: @EmpireOfLight
2 years 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 2 years ago by EmpireOfLight (previous) (diff)

@EmpireOfLight
2 years ago

2 options for image filter, shown in admin sidebar

#42 @melchoyce
2 years 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
2 years ago

What are the Unicodes for all the new icons?

@EmpireOfLight
2 years 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
2 years ago

Replying to liljimmi:

What are the Unicodes for all the new icons?

See my screenshot.

#45 in reply to: ↑ 44 @liljimmi
2 years ago

Thank you :-)

#46 follow-up: @EmpireOfLight
2 years 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
2 years ago

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

#48 in reply to: ↑ 47 @melchoyce
2 years 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.


2 years ago

#50 @obenland
2 years ago

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

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

@liljimmi
2 years ago

CSS for new Dashicons

@liljimmi
2 years ago

Font files with new Dashicons

@liljimmi
2 years ago

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

#51 follow-up: @melchoyce
2 years 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
2 years ago

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

#53 @obenland
2 years ago

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

#54 in reply to: ↑ 52 @melchoyce
2 years 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
2 years 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
2 years 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
2 years ago

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

#57 @melchoyce
2 years ago

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

@obenland
2 years ago

#58 @melchoyce
2 years ago

#32874 was marked as a duplicate.

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


2 years ago

@liljimmi
2 years ago

Added thumbs down icons

@liljimmi
2 years ago

New font files including thumbs down

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


2 years ago

@liljimmi
2 years ago

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

@liljimmi
2 years ago

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

#61 @ocean90
2 years 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
2 years 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.


2 years ago

#64 @ocean90
2 years ago

In 33150:

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

see #30902, #28784.

#65 @melchoyce
2 years ago

#33075 was marked as a duplicate.

#66 @melchoyce
2 years ago

Suggestion from #33075: move/drag icon.

#67 @levelfourstorefront
23 months ago

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

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


22 months ago

#69 @icons8
6 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.