blog/content/posts/2012-06-13-retina-icons-in-wordpress-3-4.md

---
type: post

title: Retina icons in WordPress 3.4
author: Matthias Kretschmann

date: 2012-06-13 19:01:20+00:00

tags:
- design
- wordpress

coinhive: true
---

Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina assets](http://core.trac.wordpress.org/ticket/20293) for all the icons in the admin area to make them look crisp on devices with high-dpi screens like the iPhone or iPad 3, most flagship Android devices and of course the new ÜberMacBookPro.

And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3:

![](../media/wp34_retina_icons.png)

So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon.

There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag.

[![](../media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.

And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html).
start with content edits 2013-11-18 23:54:59 +01:00			`---`
categories & tags 2018-07-19 02:22:01 +02:00			`type: post`
all posts back to 2011 done 2013-11-19 23:21:19 +01:00
start with content edits 2013-11-18 23:54:59 +01:00			`title: Retina icons in WordPress 3.4`
all posts back to 2011 done 2013-11-19 23:21:19 +01:00			`author: Matthias Kretschmann`

			`date: 2012-06-13 19:01:20+00:00`
add some tags to posts 2015-06-07 23:00:52 +02:00
start with content edits 2013-11-18 23:54:59 +01:00			`tags:`
kill categories 2018-08-30 22:50:09 +02:00			`- design`
			`- wordpress`
tweaks 2017-11-25 17:24:23 +01:00
			`coinhive: true`
start with content edits 2013-11-18 23:54:59 +01:00			`---`

add some tags to posts 2015-06-07 23:00:52 +02:00			`Apart from a nicely responsive admin area, WordPress 3.4 now [includes retina assets](http://core.trac.wordpress.org/ticket/20293) for all the icons in the admin area to make them look crisp on devices with high-dpi screens like the iPhone or iPad 3, most flagship Android devices and of course the new ÜberMacBookPro.`
start with content edits 2013-11-18 23:54:59 +01:00
			`And it looks gorgeous. Here's a detail screenshot of the admin area in 3.4 in full scale, taken on the iPad 3:`

post metadata cleanup 2018-07-17 23:26:36 +02:00			`![](../media/wp34_retina_icons.png)`
start with content edits 2013-11-18 23:54:59 +01:00
			`So if you're a plugin developer you absolutely want to make sure to include retina assets for your plugin, like a double sized admin menu icon.`

add some tags to posts 2015-06-07 23:00:52 +02:00			There's just one problem: WordPress doesn't include anything to make this easy for developers. The functions `register_post_type()` and `add_menu_page()` only allow you to define one image as menu icon which then gets inserted as `img` tag.
start with content edits 2013-11-18 23:54:59 +01:00
post metadata cleanup 2018-07-17 23:26:36 +02:00			`[![](../media/kremalicious-Teaser-WP-Icon-Template.png)](/wp-icons-template/)If you want to include retina assets, you have to do it via CSS and media queries. Have a look at the code examples in my [WordPress icons template post](/wp-icons-template/) or peek around in the [github repository](https://github.com/kremalicious/wp-icons-template) to see how this can be achieved.`
start with content edits 2013-11-18 23:54:59 +01:00
			`And no, [SVG for your icons are not the solution](http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html).`