{"id":1683,"date":"2016-09-01T17:31:15","date_gmt":"2016-09-01T12:31:15","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=1683"},"modified":"2016-09-01T23:59:05","modified_gmt":"2016-09-01T18:59:05","slug":"bad-icon-wp-admin","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/","title":{"rendered":"Why You Should Never Use Colored Icons Inside the WP Admin Panel"},"content":{"rendered":"<p><code>&lt;rant&gt;<\/code><\/p>\n<p>This is going to be a short post\u00a0because I&#8217;ll try to keep it on point. WordPress has an ecosystem. When you enter that ecosystem, you gotta respect its rules; you gotta make an effort to be a part of the community, and you should try to\u00a0improve the product user experience while you&#8217;re at it.<\/p>\n<p>Remember that kid from your time at school who never really understood how to be a part of the cool kid&#8217;s group? Especially, during summer camps when there was no uniform condition to abide by, he wore the oddest of the clothes.\u00a0Yup, it was that time in our lives when standing outside the crowd meant you are a weirdo geek or something.<\/p>\n<p>Same is the case with WordPress. You see, WordPress core doesn&#8217;t have everything you need to build your custom website with. That&#8217;s why there exists a concept of plugins. Plugins are supposed to extend WordPress. Now, I am not talking about API based plugins which connect a SaaS platform with WordPress. I am talking about little plugins which add an extra functionality in your WordPress admin panel.<\/p>\n<blockquote><p>You see I was a UX designer who later converted from frontend of the\u00a0web to a full stack developer. But that designer part inside me never really went away. I find it hard not to judge a book by its cover. In case of WordPress plugins, I judge your programming practices with these teeny tiny mistakes.<\/p><\/blockquote>\n<h2 id=\"responsible-extension-of-wordpress-admin-panel\">Responsible Extension of WordPress Admin Panel<a href=\"#responsible-extension-of-wordpress-admin-panel\" class=\"heading-link\">#<\/a><\/h2>\n<p>I guess what I am trying to say is that when you build a small WordPress plugin, that extends a feature inside our WordPress Admin\u00a0panel, you should be very careful about the list of following factors.<\/p>\n<p><strong>\u26a1\ufe0f\u00a0Never use colored icons inside the admin panel!<\/strong> It&#8217;s true, and I can&#8217;t tell you how many plugin developers ignore\u00a0this one. When you add a menu for your plugin or when you add\u00a0an extra feature in the WP editor&#8217;s TinyMCE bar; in both the cases you get to add an icon for your menu or the feature. You have the option to be a responsible developer here. Adding a colored icon disturbs everything for someone like me.<\/p>\n<blockquote><p>It&#8217;s very hard to focus and write something when your editor has more colors inside it than a friggin&#8217; rainbow.<\/p><\/blockquote>\n<\/section>\n<div class=\"postcontents full\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1684\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons.png\" alt=\"Bad-UX-WP-Editor-Icons\" width=\"1880\" height=\"258\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons.png 1880w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-300x41.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-768x105.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-1024x141.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-1680x231.png 1680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-860x118.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-680x93.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-400x55.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-WP-Editor-Icons-50x7.png 50w\" sizes=\"auto, (max-width: 1880px) 100vw, 1880px\" \/><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>See how funny the TinyMCE bar looks when you break the\u00a0flow of design and choose to embed colorful unicorns inside it? I for one cannot stand it. Here&#8217;s another one.<\/p>\n<\/section>\n<div class=\"postcontents full\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1685\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons.png\" alt=\"Bad-colored-icons\" width=\"1110\" height=\"148\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons.png 1110w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons-300x40.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons-768x102.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons-1024x137.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons-860x115.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons-680x91.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons-400x53.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-colored-icons-50x7.png 50w\" sizes=\"auto, (max-width: 1110px) 100vw, 1110px\" \/><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>See, how bad it looks? Yucks! I wanted to use this ThirstyAffiliates plugin but having to look at these two greenish icons made\u00a0me write off the plugin in the very first week. I don&#8217;t even know how to explain this thing. But\u00a0to me, it looks like you threw up over the UI and thought \u2014 Yeah, that looks nice!<\/p>\n<p>\u26a1\ufe0f\u00a0<strong>Never put colored icons in the admin menu bar!\u00a0<\/strong>Some plugin developers believe that they are doing some kinda favor to their users by putting a big pixelated piece of junk right inside the admin menu bar. What? Too much? Did I just say that out loud? What&#8217;s done is done now. I hate to break it to you, but can you please stop ruining the WordPress admin panel?<\/p>\n<\/section>\n<div class=\"postcontents full\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1688\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon.png\" alt=\"Piece-of-junk-icon\" width=\"1920\" height=\"800\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon.png 1920w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-300x125.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-768x320.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-1024x427.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-1680x700.png 1680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-860x358.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-680x283.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-400x167.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Piece-of-junk-icon-50x21.png 50w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>See what I am talking about? In\u00a0the collection of 7 custom plugins, all of the plugins except one kept their icons in line with WP admin panel design. See how cool they look? And can you spot the pixellated, ultra-visible (read ultra-hateful) blue-colored icon for WP-Optimize? That said, it&#8217;s a pretty great plugin. I use it all the time.<\/p>\n<\/section>\n<div class=\"postcontents full\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1689\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker.png\" alt=\"Bad-UX-deal-breaker\" width=\"1920\" height=\"800\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker.png 1920w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-300x125.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-768x320.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-1024x427.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-1680x700.png 1680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-860x358.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-680x283.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-400x167.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-UX-deal-breaker-50x21.png 50w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>Oh, this again. Look at how bad that greenish icon looks the one for Affiliate Links. It&#8217;s the deal breaker for me. Couldn&#8217;t stand all the great features which this plugin had to offer due to the poor choice of silly colored-icons.<\/p>\n<h3 id=\"speak-away\">Speak Away!<a href=\"#speak-away\" class=\"heading-link\">#<\/a><\/h3>\n<p>I hope I have not hurt your feelings, oh did I? Maybe I should? WordPress developers need a reality check. And don&#8217;t you even get me started at\u00a0if your plugins should create a separate menu or just reside as a sub menu inside tools\/setting menu. Seriously, don&#8217;t.<\/p>\n<p><code>&lt;\/rant&gt;<\/code><\/p>\n<div class=\"alert green\"><span style=\"color: #ffffff;\"><strong>[UPDATE]<\/strong>:\u00a0I like and use the plugins that I mentioned in this article. The only thing that I don&#8217;t like about them is their colored icons. I hope no one has any funny ideas about this troll. It is NOT meant to disgrace or disrespect anyone. #FoodForThought<\/span><\/div>\n","protected":false},"excerpt":{"rendered":"<p><rant>WordPress Developers! Stop using colored, pixelated, weird, ultra-hateful, deal-breaking, bad for UX icons inside the WP admin panel. <\/rant><\/p>\n","protected":false},"author":2,"featured_media":1690,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10],"tags":[129,128],"class_list":["post-1683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-rant","tag-responsible-ui"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Why You Should Never Use Colored Icons Inside the WP Admin Panel<\/title>\n<meta name=\"description\" content=\"WordPress Developers! Stop using colored, pixelated, weird, ultra-hateful, deal-breaking, bad for UX icons inside the WP admin panel.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Why You Should Never Use Colored Icons Inside the WP Admin Panel\" \/>\n<meta property=\"og:description\" content=\"WordPress Developers! Stop using colored, pixelated, weird, ultra-hateful, deal-breaking, bad for UX icons inside the WP admin panel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Awais\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-01T12:31:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-09-01T18:59:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-Icon-bad-ux.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ahmad Awais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:site\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ahmad Awais\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"Why You Should Never Use Colored Icons Inside the WP Admin Panel\",\"datePublished\":\"2016-09-01T12:31:15+00:00\",\"dateModified\":\"2016-09-01T18:59:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/\"},\"wordCount\":804,\"commentCount\":17,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/Bad-Icon-bad-ux.png\",\"keywords\":[\"Rant\",\"Responsible UI\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/\",\"name\":\"Why You Should Never Use Colored Icons Inside the WP Admin Panel\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/Bad-Icon-bad-ux.png\",\"datePublished\":\"2016-09-01T12:31:15+00:00\",\"dateModified\":\"2016-09-01T18:59:05+00:00\",\"description\":\"WordPress Developers! Stop using colored, pixelated, weird, ultra-hateful, deal-breaking, bad for UX icons inside the WP admin panel.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/Bad-Icon-bad-ux.png\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/Bad-Icon-bad-ux.png\",\"width\":1920,\"height\":1200,\"caption\":\"Bad-Icon-bad-ux\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/bad-icon-wp-admin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why You Should Never Use Colored Icons Inside the WP Admin Panel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/\",\"name\":\"Ahmad Awais\",\"description\":\"Founder &amp; CEO of CommandCode.ai f\\\/k\\\/a Langbase | Google Developers Advisory Board (gDAB) founding member\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahmadawais.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\"},\"description\":\"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \\\"Awais is an awesome example for developers\\\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\\\/ML\\\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\\\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.\",\"sameAs\":[\"https:\\\/\\\/AhmadAwais.com\\\/\",\"https:\\\/\\\/facebook.com\\\/AhmadAwais\",\"https:\\\/\\\/instagram.com\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/x.com\\\/MrAhmadAwais\",\"https:\\\/\\\/youtube.com\\\/AhmadAwais\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Why You Should Never Use Colored Icons Inside the WP Admin Panel","description":"WordPress Developers! Stop using colored, pixelated, weird, ultra-hateful, deal-breaking, bad for UX icons inside the WP admin panel.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/","og_locale":"en_US","og_type":"article","og_title":"Why You Should Never Use Colored Icons Inside the WP Admin Panel","og_description":"WordPress Developers! Stop using colored, pixelated, weird, ultra-hateful, deal-breaking, bad for UX icons inside the WP admin panel.","og_url":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2016-09-01T12:31:15+00:00","article_modified_time":"2016-09-01T18:59:05+00:00","og_image":[{"width":1920,"height":1200,"url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-Icon-bad-ux.png","type":"image\/png"}],"author":"Ahmad Awais","twitter_card":"summary_large_image","twitter_creator":"@MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"Why You Should Never Use Colored Icons Inside the WP Admin Panel","datePublished":"2016-09-01T12:31:15+00:00","dateModified":"2016-09-01T18:59:05+00:00","mainEntityOfPage":{"@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/"},"wordCount":804,"commentCount":17,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"image":{"@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-Icon-bad-ux.png","keywords":["Rant","Responsible UI"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/","url":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/","name":"Why You Should Never Use Colored Icons Inside the WP Admin Panel","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#primaryimage"},"image":{"@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-Icon-bad-ux.png","datePublished":"2016-09-01T12:31:15+00:00","dateModified":"2016-09-01T18:59:05+00:00","description":"WordPress Developers! Stop using colored, pixelated, weird, ultra-hateful, deal-breaking, bad for UX icons inside the WP admin panel.","breadcrumb":{"@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/bad-icon-wp-admin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#primaryimage","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-Icon-bad-ux.png","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-Icon-bad-ux.png","width":1920,"height":1200,"caption":"Bad-Icon-bad-ux"},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/bad-icon-wp-admin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"Why You Should Never Use Colored Icons Inside the WP Admin Panel"}]},{"@type":"WebSite","@id":"https:\/\/ahmadawais.com\/#website","url":"https:\/\/ahmadawais.com\/","name":"Ahmad Awais","description":"Founder &amp; CEO of CommandCode.ai f\/k\/a Langbase | Google Developers Advisory Board (gDAB) founding member","publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahmadawais.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg"},"description":"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \"Awais is an awesome example for developers\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\/ML\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.","sameAs":["https:\/\/AhmadAwais.com\/","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/x.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2016\/09\/Bad-Icon-bad-ux.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/1683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/comments?post=1683"}],"version-history":[{"count":0,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/1683\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media\/1690"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=1683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=1683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=1683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}