Improve Icon Size of Range Selector in Dimension Panel

[soyebsalar]

In the WordPress block editor, the range selector icons in the "Dimensions" panel (e.g., for Margin and Padding) are currently 24px in size. This size causes the icons to appear unclear or pixelated, as shown in the attached screenshot. Increasing the size of these icons to 32px will improve visibility and maintain consistency with WordPress design guidelines.

Steps to Reproduce:

Open the WordPress block editor.
Add any block (e.g., YouTube Embed or Paragraph block).
Navigate to the Block Settings in the right-hand sidebar.
Locate the Dimensions panel under the settings (e.g., for Margin or Padding).
Observe the range selector icons, which are unclear due to their small size (24px).

Expected Behavior:

The icons in the range selector should be visually clear and easily identifiable. Increasing the icon size to 32px will enhance clarity and user experience.
Actual Behavior:

The icons appear small and unclear at 24px, reducing usability.

Proposed Solution:

Update the wordpress-develop\src\wp-includes\js\dist\block-editor.js for the range selector component to increase the icon size to 32px.

please see the screenshot : ​https://prnt.sc/9tPHS8COcJEC

[soyebsalar]

Improve Icon Size of Range Selector in Dimension Panel

[hassanalibowdev]

Eyes On it

[im3dabasia1]

Hey @soyebsalar, thank you for your first ticket on Trac!

This might need feedback from the design team. In the screenshot I’ve added:
,

I noticed that all the SVG icons in the side panel, such as Settings, Styles, Link, Triple Dots, Filters, and the Margin icon, are consistently sized at 24 × 24. Changing one of them to 32 would create inconsistency with the rest.

[karmatosed]

Thank you for your ticket. In order to ensure the right attention gets to this, I am going to close it here and make sure the issue in the editor GitHub repo is the one to focus on.

That has been created here: ​https://github.com/WordPress/gutenberg/issues/67257