{"id":39366,"date":"2013-07-02T11:45:45","date_gmt":"2013-07-02T09:45:45","guid":{"rendered":"https:\/\/elmastudio.de\/?p=39366"},"modified":"2026-08-27T13:43:45","modified_gmt":"2026-08-27T11:43:45","slug":"genericons-a-free-gpl-licensed-icon-font-for-wordpress-projects","status":"publish","type":"post","link":"https:\/\/elmastudio.de\/en\/genericons-a-free-gpl-licensed-icon-font-for-wordpress-projects\/","title":{"rendered":"Genericons: A free GPL-licensed Icon Font For WordPress Projects"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Of course there are a quite a number of great icon fonts out there, like the Font Awesome icon font, which is especially designed to work with Bootstrap. For our next WordPress theme though, we dicided to use the <a href=\"https:\/\/genericons.com\/\" title=\"Genericons Icon Font\">Genericons Icon Font<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"215\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-icon-font-for-wordpress.png\" alt=\"genericons-icon-font-for-wordpress\" class=\"wp-image-39020\" srcset=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-icon-font-for-wordpress.png 760w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-icon-font-for-wordpress-600x170.png 600w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-icon-font-for-wordpress-350x99.png 350w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-icon-font-for-wordpress-300x84.png 300w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-icon-font-for-wordpress-150x42.png 150w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-icon-font-for-wordpress-380x107.png 380w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With Genericons you don&#8217;t get that many icons to choose from, but in my experience all the icons you will need for most projects are available. The great thing about Genericons is that the font is created by Automattic (the company behind WordPress) and therefore the font works perfectly for WordPress themes or plugins and has the Open Source GPL license just like WordPress does.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Use The Genericons Icon Font In Your Theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s pretty easy to include the icon font in your WordPress theme. Just download the Genericons font folder including some helpful instructions from the <a href=\"https:\/\/genericons.com\/\" title=\"Genericons Icon Font\">Genericons website<\/a>. Now you can to add the following <strong>@font-face<\/strong> code to your <strong>style.css<\/strong> file (at the top of your stylesheet):<\/p>\n\n\n<figure class=\"code-block quire-fill-fade\" data-lines=\"10\"><div class=\"code-block-controls quire-surface\"><span class=\"quire-tooltip code-block-copy-tip\" data-side=\"top\"><button type=\"button\" class=\"quire-icon-button code-block-copy\" aria-label=\"Copy code\" hidden><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon is-done\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><\/button><span class=\"quire-tooltip-bubble\" role=\"tooltip\">Copy code<\/span><\/span><\/div>\n<pre class=\"wp-block-code\"><code><span class=\"code-line\">@font-face {<\/span><span class=\"code-line\">    font-family: 'Genericons';<\/span><span class=\"code-line\">    src: url('font\/genericons-regular-webfont.eot');<\/span><span class=\"code-line\">    src: url('font\/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),<\/span><span class=\"code-line\">         url('font\/genericons-regular-webfont.woff') format('woff'),<\/span><span class=\"code-line\">         url('font\/genericons-regular-webfont.ttf') format('truetype'),<\/span><span class=\"code-line\">         url('font\/genericons-regular-webfont.svg#genericonsregular') format('svg');<\/span><span class=\"code-line\">    font-weight: normal;<\/span><span class=\"code-line\">    font-style: normal;<\/span><span class=\"code-line\">}<\/span><\/code><\/pre>\n<\/figure>\n\n\n<p class=\"wp-block-paragraph\">You also need to include the font itself in your theme folder. To do that just copy and paste the folder called <strong>&#8220;font&#8221;<\/strong> from the Genericons folder to your main theme folder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using The Icons In Your Theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now you can already use the icons in your theme. There are different options on how to use the icons. First your can include the HTML code directly in your template files. You can <strong>copy the HTML code<\/strong> for each icon on the Genericons website. The code e.g. for the chat icon will look like this:<\/p>\n\n\n<figure class=\"code-block quire-fill-fade\" data-lines=\"1\"><div class=\"code-block-controls quire-surface\"><span class=\"quire-tooltip code-block-copy-tip\" data-side=\"top\"><button type=\"button\" class=\"quire-icon-button code-block-copy\" aria-label=\"Copy code\" hidden><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon is-done\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><\/button><span class=\"quire-tooltip-bubble\" role=\"tooltip\">Copy code<\/span><\/span><\/div>\n<pre class=\"wp-block-code\"><code><span class=\"code-line\">&lt;div class=\"genericon genericon-chat\"&gt;&lt;\/div&gt;<\/span><\/code><\/pre>\n<\/figure>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"565\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code.jpg\" alt=\"Copy the HTML code of an icon.\" class=\"wp-image-39008\" srcset=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code.jpg 800w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code-600x424.jpg 600w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code-350x247.jpg 350w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code-300x211.jpg 300w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code-150x106.jpg 150w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code-380x268.jpg 380w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">Copy the HTML code of an icon.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In my option it is even easier to include the icons via CSS. Therefore you need to copy the icons CSS code on the Genericons website, for the chat icon this would be:<\/p>\n\n\n<figure class=\"code-block quire-fill-fade\" data-lines=\"1\"><div class=\"code-block-controls quire-surface\"><span class=\"quire-tooltip code-block-copy-tip\" data-side=\"top\"><button type=\"button\" class=\"quire-icon-button code-block-copy\" aria-label=\"Copy code\" hidden><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon is-done\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><\/button><span class=\"quire-tooltip-bubble\" role=\"tooltip\">Copy code<\/span><\/span><\/div>\n<pre class=\"wp-block-code\"><code><span class=\"code-line\">content: 'f108';<\/span><\/code><\/pre>\n<\/figure>\n\n\n<p class=\"wp-block-paragraph\">Now you can add the following CSS properties to include the icon in your stylesheet:<\/p>\n\n\n<figure class=\"code-block quire-fill-fade\" data-lines=\"7\"><div class=\"code-block-controls quire-surface\"><span class=\"quire-tooltip code-block-copy-tip\" data-side=\"top\"><button type=\"button\" class=\"quire-icon-button code-block-copy\" aria-label=\"Copy code\" hidden><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon is-done\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><\/button><span class=\"quire-tooltip-bubble\" role=\"tooltip\">Copy code<\/span><\/span><\/div>\n<pre class=\"wp-block-code\"><code><span class=\"code-line\">.chat-icon:before {<\/span><span class=\"code-line\">\tcontent: 'f108';<\/span><span class=\"code-line\">\tdisplay: inline-block;<\/span><span class=\"code-line\">\t-webkit-font-smoothing: antialiased;<\/span><span class=\"code-line\">\tfont: normal 16px\/1 'Genericons';<\/span><span class=\"code-line\">\tvertical-align: top;<\/span><span class=\"code-line\">}<\/span><\/code><\/pre>\n<\/figure>\n\n\n<p class=\"wp-block-paragraph\">This way it&#8217;s really easy to change the font-size properties and adjust the size of your icon or change the color value to give your icon a different color.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To change the CSS values on hover, you need to use the <strong>:before<\/strong> CSS pseudo class selector:<\/p>\n\n\n<figure class=\"code-block quire-fill-fade\" data-lines=\"3\"><div class=\"code-block-controls quire-surface\"><span class=\"quire-tooltip code-block-copy-tip\" data-side=\"top\"><button type=\"button\" class=\"quire-icon-button code-block-copy\" aria-label=\"Copy code\" hidden><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon is-done\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><\/button><span class=\"quire-tooltip-bubble\" role=\"tooltip\">Copy code<\/span><\/span><\/div>\n<pre class=\"wp-block-code\"><code><span class=\"code-line\">.chat-icon:hover:before {<\/span><span class=\"code-line\">\tcolor: red;<\/span><span class=\"code-line\">}<\/span><\/code><\/pre>\n<\/figure>\n\n\n<p class=\"wp-block-paragraph\">You can either create a new CSS class for each icon and then add the CSS class to the specific HTML elements in your theme or you add the icon CSS properties to a specific CSS class that already exists in your stylesheet. This can be a bit easier I think, if you only want to use the icon ones in your theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example you could add an edit icon to the WordPress post edit link by adding the icon to the <strong>entry-edit<\/strong> CSS class:<\/p>\n\n\n<figure class=\"code-block quire-fill-fade\" data-lines=\"7\"><div class=\"code-block-controls quire-surface\"><span class=\"quire-tooltip code-block-copy-tip\" data-side=\"top\"><button type=\"button\" class=\"quire-icon-button code-block-copy\" aria-label=\"Copy code\" hidden><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\/><\/svg><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" class=\"code-block-icon is-done\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg><\/button><span class=\"quire-tooltip-bubble\" role=\"tooltip\">Copy code<\/span><\/span><\/div>\n<pre class=\"wp-block-code\"><code><span class=\"code-line\">.entry-edit:before {<\/span><span class=\"code-line\">\tcontent: 'f411';<\/span><span class=\"code-line\">\tdisplay: inline-block;<\/span><span class=\"code-line\">\t-webkit-font-smoothing: antialiased;<\/span><span class=\"code-line\">\tfont: normal 16px\/1 'Genericons';<\/span><span class=\"code-line\">\tvertical-align: top;<\/span><span class=\"code-line\">}<\/span><\/code><\/pre>\n<\/figure>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"246\" src=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-im-theme.jpg\" alt=\"The Genericons edit icon integrated in a theme.\" class=\"wp-image-39012\" srcset=\"https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-im-theme.jpg 760w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-im-theme-600x194.jpg 600w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-im-theme-350x113.jpg 350w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-im-theme-300x97.jpg 300w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-im-theme-150x49.jpg 150w, https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-im-theme-380x123.jpg 380w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><figcaption class=\"wp-element-caption\">The Genericons edit icon integrated in a theme.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why Are Icon Fonts So Awesome?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using icon fonts instead of images with icons in your theme is getting more and more popular, especially since a lot of devices have Retina displays. Icons that are included via an icon font are scalable and therefore stay <em>perfectly sharp<\/em> on all kinds of high-resolution displays. When using images for your icons you always have to include an extra Retina-ready image for every single icon in your theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Icon fonts are also practical, because it is super easy to <em>change colors<\/em> and other CSS properties. You can see a helpful introduction to icon fonts with code examples at the <a href=\"https:\/\/css-tricks.com\/examples\/IconFont\/\" title=\"Icon Fonts Are Awesome\">CSS Tricks blog<\/a>. You can even test the different icon font properties and see what you can do with the icon fonts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Your Option And Feedback<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Have you used icon fonts already and what is your option on using icon fonts instead of images? Which is your favorite icon fond and what kind of advice would you give on using icon fonts in general? I&#8217;m looking forward to your feedback and comments!<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Of course there are a quite a number of great icon fonts out there, like the Font Awesome icon font, which is especially designed to work with Bootstrap. For our next WordPress theme though, we dicided to use the Genericons Icon Font. With Genericons you don&#8217;t get that many icons to choose from, but in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":39008,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1238,1249,910],"tags":[1250,1251,966],"class_list":["post-39366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typography","category-web-design","category-wordpress-en","tag-font-face-en-2","tag-genericons-en-2","tag-gpl"],"jetpack_shortlink":"https:\/\/wp.me\/phlOHV-aeW","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/elmastudio.de\/wp-content\/uploads\/2013\/06\/genericons-copy-code.jpg","_links":{"self":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/39366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/comments?post=39366"}],"version-history":[{"count":4,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/39366\/revisions"}],"predecessor-version":[{"id":314595,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/39366\/revisions\/314595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/media\/39008"}],"wp:attachment":[{"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/media?parent=39366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/categories?post=39366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elmastudio.de\/en\/wp-json\/wp\/v2\/tags?post=39366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}