Icon: Add SVG files for forms block#74116
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
I wonder if there are other options for the form icon? This one from Lucide is quite nice. The hash seems a little large, maybe it should have a 16px footprint like some of the other icons in the library? |
|
Thanks for contributing. I'd echo Jay's point, the Lucide one is quite nice. In general I would not adapt from Dashicons, but copy an existing WordPress icon and adapt that, that way you'll get the right spacing, positioning, metrics, etc. The hash seems useful as an icon to have, but it's not clear to me that it reads as "number input". In fact all these icons feel somewhat eclectic: 
I know they are dashicons, but the feedback remains regardless of style: these are all icons for child blocks of the form, and I would expect them to share some visual aspects so they feel related, like they belong together. This is similar to what has been done for comment related icons: 
Extrapolating on Jay's feedback about the Lucide icon, what you could do is take a similar approach: have a general form icon, then variants that keep the top half of that icon but substitute small details below, like letters. ASCII mockups: Form Text checkbox I'd even challenge the idea that each of those child items need to have bespoke unique icons. All "title" blocks have the same icons: 
Similarly, I could see you having a single Form icon, and a single icon for all form child blocks inside. None of these feelings are strong, hope the advice is useful. |
|
@jameskoster this was the I've switched to @jasmussen ngl, your proposal looks ambitious, but it could potentially generate too much discussion about whether they fit or not. To me, it looks more appropriate for a future enhancement than for what it's pretending to be now (switching from dashicons that should be eliminated to SVG). So, I tried to fit with the current set of icons as many as I could. For now, I'm just trying to triage and add these two icons to the set, with the objective of pushing the forms block out of experimental phase for 2026. Maybe a future iteration could be making a set of icons that uniformly represent each of the aspects of the form's idea. |
|
I don't think it's necessarily ambitious, and having good icons is a blocker to stabilizing/shipping the block. I took a quick stab at the idea I outlined, click to enlarge: 
It did not come together as I hoped, there's not a lot of room for detail, so I tried an alternative: 
|
For the first version, I'm saying that is ambitious, because there a lot of casuistry that will end breaking the format, as you said, there is no room for detail, and some fields like telephone will not be noticeable. The second format is more in line what we already have adding some extra icons. From there for this PR we could extract:
I'm assuming that the URL fits with the current ´link.svg ConclusionI am inclined to move this as we cannot be stuck deciding this for a century. I would take @jasmussen proposals for |
|
I'm concerned about the reason for releasing new icons while the Form Block is still experimental. As I mentioned here, Can we make the icons internal? That way, it would be easier to iterate. Once the Form Block or the icon design has stabilized, we can consider whether it's worth releasing those icons to the public. |
|
I'd echo that these icons should be local first, and welcome all the feedback, by the way. They may even remain internal to the block itself, even after "graduation"; one one consideration is that the icons here are ideally block specific (which is why I explored direction 1 first), meant to be unique icons used just for this block and not generically for other applications. For example if there are URL and Mobile blocks needed, IMO they should not use the existing icons there, because they are link and mobile blocks. I realize that nuance is difficult, but it's nevertheless also context for the radio and checkbox icons, which outside of the parent block context will simply be squares and circles. So perhaps the action item for now is to keep discussing this, but mature the block under the existing experiment, and decide on the iconography towards the end. For example one option which after the latest discussion seems increasingly compelling to me is to not make multiple bespoke icons for each different form sub-block type, but to have a single icon for form, and a single icon for form block, applied to every child block inside. |
|
Ok @t-hamano @jasmussen |
|
The multiple icons didn't sit right with me, so I kept thinking about it, and increasingly would propose that since all the child blocks of this parent form block are usable only inside that one parent, maybe they can share icons. The motivation is similar list view apps, like Figma: all frames despite having different contents, use the same icon. Also: to avoid the circles and squares, should they ever land in the icon library, for being used as utility icons like dots or bullets. For that reason, I revisited this yet again, with this option: 
A generic form icon, and a generic form elemement icon. SVGs in case it is useful to move things forward. Form: Form element: Note that all these icon explorations are here, in this Figma file. And keep Aki's feedback in mind, I would defer to his instincts on how to proceed, what to add or not, and how to add them. |
That's a great idea, and since it's more abstract, we could consider exposing it in an icon library in the future. In #73996, I think we can set those two icons as the internal icons of the Form block. Regarding the new "hash" icon, we can discuss if necessary, whether it's worth exposing as a generic icon, unrelated to the Form Block. |
SirLouen
force-pushed
the
design/form-hash-icons
branch
from
463031b to
758837e
Compare
SirLouen
changed the title
4 participants
Referencing this PR #73996
Two new icons needed for the Forms block
formsicon adapted from the original dashicons, with 24×24 canvas and 18×18 icon maintaining the original aspect ratio.hashicon standardized with, 24×24 canvas, 18×18 icon, lines 1.5pxOnce this PR is merged, I will merge it into #73996 so we can move it forward.
cc @jameskoster @mattmiklic