Best Image Size for WordPress Admin Icons

The best image size for WordPress admin icons depends on where the icon appears. WordPress does not use one universal icon dimension across the administration interface.

A browser favicon, Toolbar icon, admin menu icon and full sidebar logo may all belong to the WordPress backend, but they have completely different visual constraints.

A practical starting point is:

Admin Bar / Toolbar icon
→ 20 × 20px rendered

Admin menu icon
→ approximately 20 × 20px visual target

Admin favicon
→ approximately 32 × 32px for a direct admin-only icon

WordPress Site Icon
→ at least 512 × 512px source

Admin menu logo
→ depends on aspect ratio
→ often around 120 × 32px rendered

Those values are not interchangeable.

You should also distinguish between:

source image dimensions
and
rendered interface dimensions

A raster image displayed at 20 × 20 CSS pixels can use a 40 × 40 source for additional density. An SVG can use a compact coordinate system such as a 20 × 20 viewBox and scale cleanly without requiring a larger bitmap.

This guide explains the best image sizes for WordPress admin icons, how WordPress treats different backend icon types, when to use SVG instead of raster images, how high-density displays affect source dimensions and why simply uploading the largest possible image does not produce a sharper administration interface.

There is no single WordPress admin icon size

The phrase “WordPress admin icon” can refer to several different things.

For example:

Admin menu icon
Admin Bar icon
Admin favicon
Site Icon
Admin menu logo
Dashboard icon
Plugin interface icon
Button icon

Each appears inside a different layout.

The correct size therefore depends on the component.

Quick reference: recommended WordPress admin icon sizes

TOP ADMIN BAR ICON

Rendered size:
20 × 20px

Raster source:
20 × 20px minimum
40 × 40px useful for 2x density

SVG:
20 × 20 viewBox works well


ADMIN MENU ICON

Visual target:
approximately 20 × 20px

Raster source:
20 × 20px or 40 × 40px

SVG:
approximately 20 × 20 coordinate system


ADMIN FAVICON

Typical rendered context:
16–32px browser tab

Practical direct source:
32 × 32px or larger square asset

TheOneWP recommendation:
32 × 32px


WORDPRESS SITE ICON

WordPress source requirement:
at least 512 × 512px

Generated uses include:
32px
180px
192px
270px


ADMIN MENU LOGO

Not really an icon.

Typical rendered example:
approximately 120 × 32px

Rule:
preserve aspect ratio
and fit available sidebar space

Source size and display size are different

This is the most important principle in the entire topic.

Suppose an icon appears in WordPress at:

20 × 20 CSS pixels

The source file does not necessarily need to contain exactly:

20 × 20 physical pixels

A raster source could instead be:

40 × 40 pixels

while CSS or WordPress still renders it at:

20 × 20px

This gives the browser more image data for high-density displays.

Do not confuse pixel density with visual size

Increasing the source resolution should not make the interface element physically larger.

For example:

Source file:
40 × 40px

Rendered size:
20 × 20px

is different from:

Source file:
40 × 40px

Rendered size:
40 × 40px

The first can improve raster sharpness.

The second doubles the visual footprint.

Best size for the WordPress Admin Bar icon

The WordPress Toolbar uses a compact icon beside the site name.

Current WordPress Core generates that site-name icon at:

width="20"
height="20"

The official wp_admin_bar_site_menu() implementation shows that WordPress requests:

32px Site Icon
+
64px Site Icon for 2x density

and renders the resulting image at:

20 × 20px

This gives us a useful Admin Bar rule

For a custom Toolbar icon, design around:

20 × 20px rendered size

If the source is raster:

20 × 20px
→ adequate baseline

40 × 40px
→ useful high-density source

Do not upload a 500 × 500 image merely because WordPress can technically scale it down.

TheOneWP Admin Bar Icon preserves the native layout

TheOneWP Admin Bar Icon replaces the site-name icon while keeping the Toolbar’s native compact dimensions.

For the implementation itself, see How to Change the WordPress Admin Bar Icon.

Use a square image for Admin Bar icons

A Toolbar icon should normally use a:

1 : 1

aspect ratio.

Examples:

20 × 20
32 × 32
40 × 40
64 × 64

are all square.

This does not mean they should all be rendered at those sizes.

Do not use a horizontal logo as a Toolbar icon

An image like:

600 × 120px

contains a 5:1 aspect ratio.

Compressing that into:

20 × 20px

will either:

• distort the logo;
• leave large empty areas;
• make the wordmark unreadable;
• require cropping.

Use a compact brand mark instead.

Best size for WordPress admin menu icons

Top-level wp-admin navigation icons occupy a similarly compact visual area.

WordPress’s native Dashicons system is designed around small administration icons, and custom icons registered through:

add_menu_page()

should generally respect that scale.

The official add_menu_page() documentation allows the icon argument to use:

• a Dashicons class;
• a custom URL;
• a base64-encoded SVG;
• none when CSS supplies the icon.

A practical menu icon target is about 20 × 20px

WordPress does not define one universal mandatory pixel size for every custom add_menu_page() image.

However, designing around:

20 × 20px

is a sensible target because it matches the visual scale of the native administration icon system.

For raster assets, a useful preparation strategy is:

Rendered:
approximately 20 × 20px

Source:
20 × 20px
or
40 × 40px for additional density

Dashicons are usually the easiest choice

WordPress provides a built-in icon set specifically for administration interfaces.

The official Dashicons reference documents the available icons and explains how they can be passed directly to WordPress admin menu APIs.

For example:

add_menu_page(
    'Reports',
    'Reports',
    'manage_options',
    'company-reports',
    'company_render_reports',
    'dashicons-chart-bar'
);

Advantages include:

• native WordPress visual language;
• no additional image request;
• automatic sizing;
• automatic alignment;
• consistent active and hover states.

When should you use a custom image instead of Dashicons?

A custom icon may be justified when:

• the plugin has a distinctive product symbol;
• the brand needs stronger recognition;
• Dashicons does not contain a suitable concept;
• you are building a tightly controlled custom administration application.

Do not use a custom image merely because it is possible.

A native icon is often more readable inside WordPress navigation.

SVG is often ideal for custom admin menu icons

SVG works particularly well for small interface icons because it can remain sharp at different pixel densities.

A useful SVG canvas is:

<svg
    width="20"
    height="20"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
>
    ...
</svg>

The exact coordinate system is not mandatory, but a compact viewBox makes icon geometry easier to reason about.

WordPress supports base64 SVG menu icons

The official add_menu_page() documentation explicitly supports:

data:image/svg+xml;base64,...

as an icon value.

This allows WordPress to treat the SVG as part of the menu configuration.

Keep SVG menu icons simple

A small administration icon should not contain:

• complex gradients;
• tiny text;
• photographic effects;
• dozens of paths;
• large embedded metadata;
• unnecessary editor information.

At approximately 20px, most of that detail becomes invisible anyway.

Design icons for the size at which people see them

An icon can look excellent at:

400 × 400px

inside a design application and fail completely at:

20 × 20px

inside wp-admin.

Always preview the asset at its actual interface size.

Use strong silhouettes

Small admin icons benefit from:

• clear shapes;
• limited internal detail;
• consistent stroke width;
• good negative space;
• recognizable silhouettes.

A good 20px icon should remain understandable without requiring the user to study it.

Transparent padding changes the effective icon size

Consider two 40 × 40 PNG files.

Icon A:

40 × 40 canvas
38 × 38 visible artwork

Icon B:

40 × 40 canvas
20 × 20 visible artwork

Both files have identical dimensions.

But Icon B will appear much smaller because half of its canvas is transparent.

File dimensions alone do not tell you visual dimensions

This is why “upload a 40 × 40 icon” is incomplete advice.

You also need to inspect:

canvas size
+
visible artwork bounds
+
internal whitespace

Tightly crop raster icons unless intentional spacing is part of the design system.

Do not compensate for bad image cropping with CSS

If an icon always appears too small because it contains excessive transparent padding, increasing CSS width can produce inconsistent results relative to other icons.

Fix the source image first.

Best size for an admin favicon

A browser favicon is a different type of icon.

It exists in browser chrome rather than inside the WordPress page layout.

A practical admin-only favicon can be designed around:

32 × 32px

for the primary browser-tab resource.

TheOneWP Admin Favicon recommends a compact 32 × 32px icon for this purpose.

Browser tabs may display the icon smaller than 32px

The source may be:

32 × 32px

while the browser visually displays it closer to:

16 × 16px

depending on browser, platform and display density.

Therefore the design must remain legible at very small sizes.

Do not use tiny text inside a favicon

A favicon containing:

ACME CORPORATION

is not going to remain readable at browser-tab scale.

Use:

A

or a simple brand symbol.

For the relationship between backend favicons and the global Site Icon, see Admin Favicon vs WordPress Site Icon.

WordPress Site Icon requires a much larger source

The WordPress Site Icon is not simply a 32 × 32 browser favicon.

WordPress recommends a square source image of at least:

512 × 512px

The official WordPress Site Icon documentation specifies this minimum.

Why does WordPress need 512 × 512px?

Because the Site Icon can be used for more than one browser-tab size.

The current:

wp_site_icon()

implementation requests several dimensions including:

32px
192px
180px
270px

The official wp_site_icon() reference shows the generated icon metadata.

WordPress’s WP_Site_Icon class also defines a minimum Site Icon source size of 512 pixels.

Do not use the 512px rule for every admin icon

This would be unnecessary:

512 × 512 PNG
↓
20 × 20 Toolbar icon

The file contains far more pixel data than the interface requires.

The 512px minimum belongs to the WordPress Site Icon system because that source serves several generated uses.

Admin favicon and Site Icon have different jobs

A useful distinction is:

Site Icon
→ broad site identity
→ large master source

Admin favicon
→ backend browser-tab identity
→ small dedicated source can be enough

If your admin favicon is refusing to change during testing, see WordPress Admin Favicon Not Updating.

Best size for a WordPress admin menu logo

An admin menu logo should not be treated as a normal square icon.

It may be a horizontal brand asset such as:

ACME

displayed above or inside the left administration navigation.

Its appropriate dimensions depend on:

• sidebar width;
• logo aspect ratio;
• menu spacing;
• collapsed state;
• responsive behavior.

A practical rendered bounding area might be around:

120px maximum width
32px maximum height

but this is a design example, not a WordPress Core requirement.

Preserve the logo aspect ratio

Use:

.admin-brand-logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 120px;
    max-height: 32px;
}

rather than:

.admin-brand-logo {
    width: 120px;
    height: 32px;
}

unless the source logo already has exactly that aspect ratio.

See WordPress Admin Logo Size, Spacing and Alignment Guide for the complete treatment.

The admin menu logo may need multiple variants

A useful brand system might provide:

Expanded sidebar
→ horizontal logo

Collapsed sidebar
→ square symbol

Toolbar
→ small square icon

Browser tab
→ favicon

Trying to use one asset for all four contexts usually creates compromises.

For sidebar implementation, see How to Add a Custom Logo to the WordPress Admin Menu.

TheOneWP Admin Menu Logo provides a dedicated configuration layer for that interface.

SVG vs PNG for WordPress admin icons

Both can work well.

The best format depends on the asset.

SVG

Advantages:

• resolution independent;
• sharp at different display densities;
• often compact for simple icons;
• easy to scale;
• ideal for geometric interface marks.

Disadvantages:

• must be handled safely;
• complex SVGs can contain unnecessary code;
• some styling techniques require careful markup;
• arbitrary user-uploaded SVGs require additional security consideration.

PNG

Advantages:

• simple browser behavior;
• supports transparency;
• easy to generate;
• predictable for favicons and compact marks.

Disadvantages:

• resolution dependent;
• can become blurry if enlarged;
• may require higher-density versions.

SVG is often better for interface icons

If the icon is:

simple
geometric
monochrome
brand-controlled

SVG is usually a strong choice.

If the asset is:

photographic
textured
pixel-based

a raster format may be more appropriate.

Do not enlarge a small raster icon

If you have:

16 × 16px PNG

and display it at:

32 × 32px

the browser must interpolate missing pixels.

The result may appear soft or blurry.

Raster assets should generally be created at least as large as their maximum rendered size.

High-density displays and 2x images

A conventional strategy for a raster icon is:

Rendered:
20 × 20 CSS px

Source:
40 × 40 physical px

This gives approximately twice the pixel density in each dimension.

2x does not mean double CSS width

The CSS should still use:

width: 20px;
height: 20px;

The larger source exists for image detail, not for layout size.

WordPress itself uses this principle in the Admin Bar

The current Toolbar implementation requests:

32px Site Icon
64px Site Icon

and can use the 64px resource as a:

2x

candidate while the actual image element remains:

20 × 20px

This is a useful example of the difference between source resolution and interface dimensions.

Should you use 3x raster admin icons?

Usually there is little practical need for extremely large sources for tiny administration icons.

A:

60 × 60 source
→ 20 × 20 rendered

can work, but the visual improvement over a well-prepared 40 × 40 source may be difficult to notice.

Keep source dimensions proportional to the actual interface need.

Image optimization still matters in wp-admin

One icon is tiny.

A poorly designed administration system can load many unnecessary assets.

A 400 KB image used as a 20px menu icon is unnecessary overhead.

Small administrative graphics should generally have correspondingly small file sizes.

Do not use full-resolution marketing assets directly

A company media library may contain:

logo-master.png
4000 × 1200
2.7 MB

Using that directly for a 20px or 32px interface icon wastes bandwidth and decoding work.

Create purpose-specific assets.

Different WordPress admin contexts need different masters

A practical asset library might contain:

brand-site-icon.png
512 × 512

brand-admin-favicon.png
32 × 32

brand-toolbar-icon.png
40 × 40

brand-menu-icon.svg
20 × 20 viewBox

brand-admin-logo.svg
horizontal logo

This is easier to maintain than one universal image stretched into every context.

WordPress plugin menu icons

A custom plugin can register an icon through:

add_menu_page()

For example:

add_action(
    'admin_menu',
    'myplugin_register_menu'
);

function myplugin_register_menu() {

    add_menu_page(
        'Company Reports',
        'Reports',
        'manage_options',
        'company-reports',
        'myplugin_render_reports',
        'dashicons-chart-bar'
    );
}

A Dashicon requires no custom image sizing.

Using a custom raster plugin menu icon

You can instead pass an image URL:

$icon_url = plugin_dir_url( __FILE__ )
    . 'assets/menu-icon.png';

add_menu_page(
    'Company Reports',
    'Reports',
    'manage_options',
    'company-reports',
    'myplugin_render_reports',
    $icon_url
);

Prepare the asset specifically for a small administration context.

Using a base64 SVG plugin menu icon

WordPress also supports a base64 SVG data URI.

The official add_menu_page() reference documents this option.

A compact SVG might begin as:

<svg
    width="20"
    height="20"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
>
    <path
        fill="black"
        d="..."
    />
</svg>

The SVG can then be encoded and passed as the icon value.

Register_post_type() icons follow the same design logic

Custom post types can specify:

menu_icon

during registration.

The official register_post_type() documentation covers custom post type registration, while the Dashicons resource demonstrates native icon usage.

Again, the icon belongs to the compact admin menu environment.

Do not use 32px visual icons in a 20px icon system without testing

A custom icon can technically be larger.

That does not mean it will align correctly with:

• Dashboard;
• Posts;
• Media;
• Pages;
• Plugins;
• other plugin menu icons.

Consistency matters more than raw pixel count.

Icon weight matters as much as dimensions

Two icons can both occupy:

20 × 20px

and still look dramatically different.

One may contain a thin 1px outline.

The other may be an almost completely filled square.

The second will appear visually larger even though its dimensions are identical.

Match visual weight, not only bounding boxes

When designing a custom icon, compare it directly beside WordPress Core icons.

Check:

• stroke thickness;
• filled area;
• negative space;
• optical centering;
• overall contrast.

Optical centering can differ from geometric centering

An asymmetric icon can be mathematically centered while appearing shifted.

For example:

◀

has more visual mass on one side than:

●

Small optical adjustments can therefore be appropriate, but begin with correct geometry first.

Do not put excessive padding inside SVG viewBoxes

This SVG:

viewBox="0 0 100 100"

with artwork only between:

40 and 60

will appear tiny when rendered.

Crop the coordinate system around the artwork or deliberately scale the paths.

Use object-fit carefully

For a raster icon inside a fixed square:

.admin-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

can preserve the complete image.

The MDN object-fit documentation explains how replaced content fits inside a defined box.

Avoid object-fit: cover for logos and icons

cover can crop parts of the image to fill the container.

That may be appropriate for photography.

It is usually inappropriate when every part of a brand symbol needs to remain visible.

Use width and height attributes where appropriate

Explicit intrinsic dimensions can make image layout more predictable.

For example:

<img
    src="toolbar-icon.png"
    width="20"
    height="20"
    alt=""
>

WordPress Core itself uses explicit:

width="20"
height="20"

for its Toolbar Site Icon.

Decorative admin icons usually need empty alt text

An icon beside a visible text label normally does not need to repeat that text to screen readers.

For example:

<img
    src="reports-icon.png"
    alt=""
>

<span>Reports</span>

can be preferable to:

alt="Reports icon"

when the text “Reports” already provides the meaningful label.

The W3C guidance for decorative images explains when empty alternative text is appropriate.

Meaningful standalone icons need an accessible name

If an icon functions as a control without adjacent text, users still need to understand its purpose.

The accessible name may come from:

• visible text;
• aria-label;
• screen-reader text;
• another appropriate accessible-name mechanism.

The visual image dimensions do not solve this problem.

Image size does not determine click target size

A 20 × 20 icon does not mean the clickable control should also be only:

20 × 20px

The icon and interaction area are separate concepts.

A button can contain a small icon while providing a larger target.

Do not enlarge the artwork merely to create a larger hit area

Instead use:

padding

around the control.

For example:

.admin-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px;
}

.admin-icon-button img {
    width: 20px;
    height: 20px;
}

Responsive wp-admin does not necessarily require responsive icon dimensions

WordPress navigation changes significantly across viewport widths, but the core icons themselves generally remain compact.

Do not automatically scale a:

20px icon

to:

36px

just because the viewport becomes smaller.

The navigation interaction changes, not necessarily the icon artwork size.

For the full menu behavior, see WordPress Admin Menu Responsive Breakpoints, Explained.

Collapsed admin menus make simple icons even more important

In an expanded sidebar, the icon has a text label beside it.

When navigation is collapsed, the icon may become the strongest visual identifier for the destination.

An ambiguous custom icon becomes more problematic in this state.

Test custom icons in both expanded and collapsed modes

Check:

• centering;
• hover state;
• active state;
• contrast;
• recognition without the text label;
• plugin notification counters;
• alignment with surrounding Core icons.

Menu width changes should not redefine icon dimensions

A wider admin sidebar may improve long navigation labels.

It does not necessarily require larger icons.

See How to Resize the WordPress Admin Menu and How to Widen the WordPress Admin Menu for the geometry of the navigation itself.

Spacing changes should remain separate too

If icons look cramped, the solution may be:

menu item padding

rather than:

bigger icon image

See How to Adjust WordPress Admin Menu Spacing.

Do not compensate for unreadable navigation with giant icons

If a backend feels difficult to scan, review:

• font size;
• spacing;
• menu organization;
• contrast;
• label clarity;

before increasing every icon.

For the wider usability problem, see Making the WordPress Admin More Readable.

Branding changes should remain coordinated

A custom icon rarely exists alone.

An agency-branded backend may contain:

Admin Bar icon
Admin menu icon
Admin menu logo
Admin favicon
login logo
custom colors

See How to Brand the WordPress Admin Dashboard for the complete system.

TheOneWP Custom Admin Color Scheme handles the separate color layer.

Use a consistent icon family

A backend can feel visually inconsistent when it mixes:

thin outline icons
solid icons
color illustrations
photographic PNGs
monochrome Dashicons

inside the same navigation.

Try to maintain a coherent:

• stroke style;
• visual weight;
• corner treatment;
• color behavior;
• level of detail.

Monochrome icons often fit wp-admin best

WordPress administration navigation generally relies on a restrained icon system.

A full-color company logo can visually overpower the surrounding menu.

For a plugin menu destination, a simplified monochrome version of the mark may fit better.

Use full-color branding where more space exists

A full-color brand identity may work better for:

• admin menu logo;
• Dashboard welcome panel;
• login page;
• support widget.

while the menu destination icon remains compact and monochrome.

Do not use CSS filters as the first solution for poor icon assets

A complex chain such as:

filter:
    brightness(0)
    saturate(100%)
    invert(...)
    sepia(...);

may recolor a raster asset, but it is often harder to maintain than supplying an icon designed for the interface.

Use currentColor with SVG when you control the markup

For inline SVG components, a path can use:

fill="currentColor"

allowing the icon to follow surrounding text color.

This can simplify:

• hover states;
• active states;
• dark themes;
• custom admin color schemes.

Whether this approach is available depends on how the icon is inserted.

Do not blindly use currentColor in base64 menu SVGs

SVGs passed through add_menu_page() are handled differently from inline SVG markup.

Follow the behavior supported by WordPress for that specific icon method rather than assuming normal DOM inheritance applies inside every encoded SVG resource.

Test active menu states

A custom icon may look correct while inactive and disappear when its menu item becomes active because of:

• color changes;
• background contrast;
• CSS filters;
• incorrect SVG fill behavior.

Test both states.

Test different WordPress admin color schemes

WordPress users can have different administration color schemes.

A dark custom icon that works against one background may disappear against another.

If your icon does not adapt automatically, test it against the color configurations your project supports.

When should an admin icon be larger than 20px?

Inside a custom plugin application, you control the design system.

A card icon may reasonably use:

24 × 24
32 × 32
48 × 48

depending on the component.

The approximately 20px recommendation applies specifically to compact WordPress navigation contexts, not every graphic inside wp-admin.

Dashboard icons can be larger

A Dashboard card might use:

32 × 32px

or:

40 × 40px

because the card provides more visual space.

Do not apply the sidebar icon dimensions automatically to Dashboard content.

Custom plugin interfaces need their own icon scale

If you are building a larger backend application, define a consistent scale such as:

Small:
16px

Default:
20px

Medium:
24px

Large:
32px

Feature icon:
40px

Then use each size according to component hierarchy.

Use CSS custom properties for a controlled icon system

For example:

:root {
    --admin-icon-xs: 16px;
    --admin-icon-sm: 20px;
    --admin-icon-md: 24px;
    --admin-icon-lg: 32px;
}

A custom application can then use:

.plugin-nav-icon {
    width: var(--admin-icon-sm);
    height: var(--admin-icon-sm);
}

.plugin-card-icon {
    width: var(--admin-icon-lg);
    height: var(--admin-icon-lg);
}

Do not override WordPress Core icon dimensions globally

A dangerous rule would be:

.dashicons {
    width: 32px;
    height: 32px;
    font-size: 32px;
}

This could affect Dashicons across the entire administration interface.

Scope custom styles to your component.

Load custom admin icon CSS through WordPress

If custom styling is required, use:

admin_enqueue_scripts

The official admin_enqueue_scripts documentation identifies this as the correct administration asset hook.

For example:

add_action(
    'admin_enqueue_scripts',
    'myplugin_admin_assets'
);

function myplugin_admin_assets() {

    wp_enqueue_style(
        'myplugin-admin',
        plugin_dir_url( __FILE__ )
            . 'assets/admin.css',
        array(),
        '1.0.0'
    );
}

The official wp_enqueue_style() reference documents stylesheet registration and loading.

Use narrowly scoped selectors

Prefer:

.myplugin-card__icon {
    width: 24px;
    height: 24px;
}

instead of:

.wp-admin img {
    width: 24px;
    height: 24px;
}

The second rule can modify unrelated plugin assets, avatars and WordPress Core images.

File size matters more than dimensions alone

Two 40 × 40 images can have very different file sizes.

For example:

Simple PNG:
3 KB

Poorly optimized image:
120 KB

Interface assets should normally be lightweight.

Remove unnecessary metadata from exported assets

Design tools can embed:

• editor metadata;
• unused layers;
• comments;
• color profiles;
• generator information.

Optimize production assets without changing their visible quality.

Do not sacrifice clarity for tiny file savings

An icon that becomes visibly blurred because it was aggressively compressed is not an optimization success.

For extremely small assets, clarity and simplicity matter more than shaving a fraction of a kilobyte through destructive compression.

Use exact dimensions when the interface requires them

Some WordPress contexts have an explicit rendered size.

The Admin Bar Site Icon is a clear example:

20 × 20px

In that case, design around the known destination.

Use maximum dimensions when proportions vary

A branding logo is different.

Instead of:

width: 120px;
height: 32px;

use:

max-width: 120px;
max-height: 32px;
width: auto;
height: auto;

because different logos have different aspect ratios.

Use square constraints for true icons

For interface icons, square dimensions are normally easier to align:

20 × 20
24 × 24
32 × 32

than arbitrary rectangles such as:

31 × 17

unless the design intentionally requires an asymmetric shape.

Common mistake: using 512 × 512 for every admin icon

The Site Icon minimum does not apply to every backend asset.

Use 512 × 512 when preparing the WordPress Site Icon master source.

Do not treat it as a universal admin icon requirement.

Common mistake: uploading a 20 × 20 icon and displaying it at 40 × 40

This can produce visible blur.

Raster assets should be prepared at or above their maximum rendered dimensions.

Common mistake: uploading a huge source and assuming it will look better

There is little value in using:

2000 × 2000

for an icon permanently displayed at:

20 × 20

especially when a purpose-built SVG or compact raster source would be lighter and easier to maintain.

Common mistake: ignoring transparent padding

Two files with the same pixel dimensions can have very different perceived sizes.

Inspect the artwork bounds.

Common mistake: using full logos as menu icons

A top-level admin menu item needs an icon.

It does not need an entire corporate identity system compressed into twenty pixels.

Common mistake: forcing width and height independently

This:

width: 20px;
height: 20px;

is correct for a square icon designed for that box.

It can distort a non-square brand asset.

Use object-fit: contain or automatic dimensions when proportions need to be preserved.

Common mistake: increasing icons to solve spacing problems

If the menu feels sparse or cramped, adjust:

padding
line-height
menu width
typography

rather than automatically scaling the icons.

Common mistake: using one image everywhere

The same image is rarely optimal for:

Site Icon
Toolbar
admin sidebar
favicon
login page

Prepare variants for each context.

Common mistake: using a detailed SVG at 20px

Vector graphics remain mathematically sharp.

That does not mean tiny details remain visually useful.

Simplify the artwork for small sizes.

Common mistake: forgetting active-state contrast

Always test custom icons against:

• normal menu background;
• hover background;
• active menu background;
• supported admin color schemes.

Common mistake: using icon size as click-target size

A small icon can sit inside a comfortably sized control.

Do not enlarge the graphic solely to make the interaction easier to click.

Common mistake: globally resizing Dashicons

Scope changes to your own plugin or component.

Core and third-party interfaces may depend on native Dashicon sizing.

Common mistake: ignoring responsive navigation

Custom sidebar icons should be tested with:

• expanded navigation;
• manually collapsed navigation;
• automatic folding;
• mobile admin navigation.

Common mistake: judging the icon only in the Media Library

The Media Library preview may show the asset at hundreds of pixels.

The real destination may be only:

20 × 20px

Always inspect the final interface.

A practical WordPress admin asset system

For an agency-managed or product-oriented backend, a useful asset structure might be:

assets/
├── admin-menu-icon.svg
├── admin-toolbar-icon.png
├── admin-favicon.png
├── admin-menu-logo.svg
└── site-icon.png

with approximate purposes:

admin-menu-icon.svg
→ compact 20px menu destination

admin-toolbar-icon.png
→ 40 × 40 source
→ rendered at 20 × 20

admin-favicon.png
→ 32 × 32 browser icon

admin-menu-logo.svg
→ horizontal branding

site-icon.png
→ 512 × 512 master source

How TheOneWP separates these icon contexts

TheOneWP treats backend branding components independently instead of pretending one image fits every surface.

Admin Bar Icon handles the compact image displayed inside the WordPress Toolbar.

Admin Favicon controls the browser-tab icon specifically for WordPress administration pages.

Admin Menu Logo handles the larger branding asset used in the left administration navigation.

Custom Admin Color Scheme controls the surrounding backend colors that those assets need to work against.

The native WordPress Site Icon remains responsible for the wider site identity.

Recommended size table

COMPONENT
Admin Bar icon

RENDERED TARGET
20 × 20px

PRACTICAL SOURCE
20 × 20
or
40 × 40 raster

BEST FORMAT
SVG or PNG


COMPONENT
Admin menu icon

RENDERED TARGET
approximately 20 × 20px

PRACTICAL SOURCE
20 × 20
or
40 × 40 raster

BEST FORMAT
Dashicon, SVG or PNG


COMPONENT
Admin favicon

RENDERED CONTEXT
approximately 16–32px

PRACTICAL SOURCE
32 × 32px or larger square

BEST FORMAT
PNG, ICO or SVG


COMPONENT
WordPress Site Icon

SOURCE REQUIREMENT
minimum 512 × 512px

WORDPRESS OUTPUT
multiple generated sizes

BEST FORMAT
PNG commonly recommended


COMPONENT
Admin menu logo

RENDERED TARGET
depends on sidebar and aspect ratio

PRACTICAL EXAMPLE
max-width around 120px
max-height around 32px

BEST FORMAT
SVG or optimized PNG

Production checklist

• Identify the exact admin component before choosing image dimensions.
• Do not apply the Site Icon’s 512 × 512 rule to every WordPress admin graphic.
• Design Admin Bar icons around the native 20 × 20px rendered size.
• Use approximately 20 × 20px as a practical visual target for admin menu icons.
• Consider a 40 × 40 raster source when a 20 × 20 image is rendered on high-density displays.
• Prefer SVG for simple scalable interface icons where appropriate.
• Use Dashicons when a suitable native icon already exists.
• Keep SVG paths and geometry simple.
• Crop unnecessary transparent padding.
• Preview icons at their real rendered size.
• Match visual weight with surrounding WordPress icons.
• Check optical as well as geometric alignment.
• Use square assets for square icon containers.
• Preserve aspect ratio for logos and non-square artwork.
• Do not stretch images by forcing incompatible width and height values.
• Do not use enormous source files for tiny interface elements.
• Optimize raster assets before production use.
• Use a compact 32px-oriented asset for a dedicated admin favicon.
• Use at least 512 × 512px for the native WordPress Site Icon source.
• Do not confuse the Site Icon with an admin-only favicon.
• Use dedicated brand variants for Toolbar, favicon and sidebar where needed.
• Keep menu icon dimensions separate from menu spacing.
• Keep menu icon dimensions separate from sidebar width.
• Test expanded and collapsed wp-admin navigation.
• Test mobile and responsive administration states.
• Test active and hover states.
• Test supported admin color schemes.
• Use empty alt text for purely decorative icons beside visible labels.
• Provide an accessible name for standalone icon controls.
• Do not equate icon size with click-target size.
• Scope custom CSS to your own components.
• Do not globally resize Dashicons or WordPress admin images.
• Load custom administration styles through admin_enqueue_scripts.
• Retest custom admin icons after significant WordPress updates.

Related guides

• How to Change the WordPress Admin Bar Icon
• WordPress Admin Logo Size, Spacing and Alignment Guide
• How to Add a Custom Logo to the WordPress Admin Menu
• Admin Favicon vs WordPress Site Icon
• WordPress Admin Favicon Not Updating
• How to Brand the WordPress Admin Dashboard

Final recommendation

There is no single best image size for every WordPress admin icon.

The correct size depends on where the asset appears.

Use this practical model:

Admin Bar icon
→ 20 × 20px rendered

Admin menu icon
→ approximately 20 × 20px visual target

Admin favicon
→ approximately 32 × 32px dedicated source

WordPress Site Icon
→ at least 512 × 512px master source

Admin menu logo
→ responsive bounding box based on aspect ratio

For small raster interface icons, a 2x source can provide additional density:

40 × 40 source
↓
20 × 20 rendered

without making the interface element physically larger.

For simple menu icons, SVG or WordPress Dashicons are usually preferable because they remain sharp without requiring oversized bitmap files.

Most importantly, evaluate the icon at the size users actually see.

A technically perfect 512px graphic can still become an unreadable mess when reduced to 20px, while a carefully simplified 20px symbol can remain immediately recognizable.

The correct admin icon is therefore not the one with the largest source dimensions. It is the one designed for its specific WordPress context, displayed at the correct interface size and prepared with enough source quality to remain sharp on the devices your users actually use.