{"id":93,"date":"2013-10-16T11:00:00","date_gmt":"2013-10-16T11:00:00","guid":{"rendered":"http:\/\/localhost\/?p=93"},"modified":"2017-01-09T06:57:00","modified_gmt":"2017-01-09T06:57:00","slug":"building-ionicons","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/building-ionicons","title":{"rendered":"Building Ionicons, Our Open Source Icon Font"},"content":{"rendered":"

When we went to build Ionic<\/a>, we knew that great design would be crucial in an amazing HTML5 mobile app development framework. This meant we had to cover a lot of (visual) bases with the design, but few design challenges were as daunting as iconography.<\/p>\n

People are going to use icons in their designs. That is a given. So, what icons would we offer with Ionic? Would we just let people figure it out themselves, or bundle in an existing icon pack? How would we manage licensing of external icon packs?<\/p>\n

Eventually, it became clear to us that in order to create a premier framework, we would need to have complete control over what we offered in order to ensure the highest standard of quality.<\/p>\n

We didn\u2019t want to force people to find their own icons (unless they wanted to), nor did we feel comfortable bundling in existing packs which we had little control and creative vision over. It seemed unavoidable that if we wanted high quality icons included with Ionic, they would need to be designed in house.<\/p>\n

It was an easy decision to go the route of making an icon font instead of using images. Icon fonts are better in pretty much every way imaginable, most notably the fact that they are vector based, which means they scale perfectly to any resolution. They look great on high-resolution displays such as iPhones and most Android devices. Moreover, they are all from one resource! That means fewer HTTP requests for various images, and zero sprite sheets.<\/p>\n

It took over a month from start to \u201cfinish\u201d (we\u2019re still adding icons) to build Ionicons<\/a>. During that time I learned a ton about how to build an icon font, and I thought it would be interesting to detail some of that here.<\/p>\n

<\/p>\n

Tools<\/h3>\n

The tools required to build Ionicons were minimal: Adobe Illustrator<\/a> for designing the vector icons, IcoMoon<\/a> for converting the vector shapes into font files, and a browser<\/a> to preview them all in. All of these were free, with the exception of Illustrator.<\/p>\n

If you\u2019re unfamiliar with IcoMoon, do take some time to check it out. It\u2019s a very cool open source tool for creating custom icon font packs. There are some legal usecase limitations if you build a custom pack from other existing icon fonts, but not if you create and import your own icons from scratch.<\/p>\n

Crisp Size<\/h3>\n

The concept of a \u201ccrisp size\u201d took a bit of time for me to understand, so I will try to explain it as simply as possible. Basically, \u201ccrisp size\u201d is the default size at which an icon renders sharply on a screen. For an icon to render sharply, its lines and edges must line up perfectly with the pixel grid of the screen. If any edges of the icon shape are not aligned to the pixel grid, they will appear blurry because the screen cannot definitively decipher where the edge ends\/begins.<\/p>\n

We decided to go with the common crisp size of 16px with Ionicons for several reasons. Having a number divisible by 2, 4 and 8 was a good step to improve crisp scalability at various sizes (for the most crispy looking icons, use font sizes 16px, 32px, 48px, 64px, etc.).<\/p>\n

Knowing this, I constructed a series of artboards in Illustrator to represent my drawing canvas for the icons. Each artboard is set to 512 x 512 pixels, with a grid dividing them into 16 x16 squares. Each square represents one pixel unit (technically there are 4 square pixels within each box). I used this grid as my guide for where to place and align each icon shape.<\/p>\n

Then came the hard part. What icons do we include, and how many should we start with? I started looking closer at all of the icons used in popular apps and websites, and took note of those most commonly used. At the top of this list were icons relating to navigation, utility, help, searching, and sharing. Ultimately, I feel we did a good job curating the most necessary and frequently used icons for this first iteration of Ionicons.<\/p>\n

From SVG to Font<\/h3>\n

It took me a solid three to four weeks to construct the initial designs of each icon in Illustrator and organize them accordingly. We went through several revisions and tweaks before we were confident they were ready for prime time. Once we reached that point, I exported each individual icon as an SVG file. From there, I imported them all into IcoMoon.<\/p>\n

Once each and every SVG file was in IcoMoon, I set the font name to \u201cionicons\u201d and the prefix to \u201cicon-\u201d for consistency. There is also a setting in IcoMoon called Font Metrics, which allows you to set your font\u2019s Crisp Size. It\u2019s important to have this set to whatever your chosen Crisp Size is, which in our case is 16px. This will ensure that our icons will appear crisp at the correct sizing units.<\/p>\n

Then I exported the font. It compiled and packaged up the necessary CSS and font files required by all the various browsers. We were really pleased with the ease of use and speed offered through IcoMoon. It made the transition from SVG to fonts a breeze.<\/p>\n

To the Internets!<\/h3>\n

I designed over 130 custom default icons, and then added another 200+ iOS 7-styled icons and social icons to boot. As of this moment, there are roughly 350 Ionicons<\/a>. I\u2019d be surprised if you don\u2019t find something to fit what you\u2019re looking for from this pack. But, on the off chance that you do, let me know. We are actively adding to the font, and my next goal is to design and include popular Android-style icons.<\/p>\n

We\u2019ve created a public repo page<\/a> for Ionicons, as well as a nifty little website<\/a> for perusing and searching. Definitely check out the search feature, which has keywords identifying common icon names and styles. For example, if you search for \u201carrow\u201d we call up every icon that could possibly be used as an arrow. We\u2019ve also included each icon\u2019s classname for easy copy\/pasting when you\u2019re developing!<\/p>\n

We intend for this icon pack to be used with Ionic<\/a>, but it\u2019s by no means limited to it. Use these icons wherever you see fit, personal or commercial. They are free to use and licensed under MIT<\/a>. We can\u2019t wait to show you the full glory of Ionic, but hopefully Ionicons will serve as a legitimate teaser for what\u2019s in store. Now go check out the Ionicons<\/a><\/strong>!<\/p>\n

Ben<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

When we went to build Ionic, we knew that great design would be crucial in an amazing HTML5 mobile app development framework. This meant we had to cover a lot of (visual) bases with the design, but few design challenges were as daunting as iconography. People are going to use icons in their designs. That […]<\/p>\n","protected":false},"author":14,"featured_media":1639,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-93","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"\nBuilding Ionicons, Our Open Source Icon Font - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/building-ionicons\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Ionicons, Our Open Source Icon Font\" \/>\n<meta property=\"og:description\" content=\"When we went to build Ionic, we knew that great design would be crucial in an amazing HTML5 mobile app development framework. This meant we had to cover a lot of (visual) bases with the design, but few design challenges were as daunting as iconography. People are going to use icons in their designs. That […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/building-ionicons\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-16T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-09T06:57:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"632\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Sperry\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benjsperry\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Sperry\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons\"},\"author\":{\"name\":\"Ben Sperry\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31\"},\"headline\":\"Building Ionicons, Our Open Source Icon Font\",\"datePublished\":\"2013-10-16T11:00:00+00:00\",\"dateModified\":\"2017-01-09T06:57:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons\"},\"wordCount\":1101,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png\",\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/building-ionicons#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons\",\"url\":\"https:\/\/ionic.io\/blog\/building-ionicons\",\"name\":\"Building Ionicons, Our Open Source Icon Font - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png\",\"datePublished\":\"2013-10-16T11:00:00+00:00\",\"dateModified\":\"2017-01-09T06:57:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/building-ionicons\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png\",\"width\":1200,\"height\":632},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/building-ionicons#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building Ionicons, Our Open Source Icon Font\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31\",\"name\":\"Ben Sperry\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg\",\"caption\":\"Ben Sperry\"},\"sameAs\":[\"http:\/\/bensperry.com\",\"https:\/\/x.com\/benjsperry\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/benjsperry\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building Ionicons, Our Open Source Icon Font - Ionic Blog","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:\/\/ionic.io\/blog\/building-ionicons","og_locale":"en_US","og_type":"article","og_title":"Building Ionicons, Our Open Source Icon Font","og_description":"When we went to build Ionic, we knew that great design would be crucial in an amazing HTML5 mobile app development framework. This meant we had to cover a lot of (visual) bases with the design, but few design challenges were as daunting as iconography. People are going to use icons in their designs. That […]","og_url":"https:\/\/ionic.io\/blog\/building-ionicons","og_site_name":"Ionic Blog","article_published_time":"2013-10-16T11:00:00+00:00","article_modified_time":"2017-01-09T06:57:00+00:00","og_image":[{"width":1200,"height":632,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png","type":"image\/png"}],"author":"Ben Sperry","twitter_card":"summary_large_image","twitter_creator":"@benjsperry","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ben Sperry","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/building-ionicons#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/building-ionicons"},"author":{"name":"Ben Sperry","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31"},"headline":"Building Ionicons, Our Open Source Icon Font","datePublished":"2013-10-16T11:00:00+00:00","dateModified":"2017-01-09T06:57:00+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-ionicons"},"wordCount":1101,"commentCount":8,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png","keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/building-ionicons#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/building-ionicons","url":"https:\/\/ionic.io\/blog\/building-ionicons","name":"Building Ionicons, Our Open Source Icon Font - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png","datePublished":"2013-10-16T11:00:00+00:00","dateModified":"2017-01-09T06:57:00+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/building-ionicons#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/building-ionicons"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/building-ionicons#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png","width":1200,"height":632},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/building-ionicons#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Building Ionicons, Our Open Source Icon Font"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31","name":"Ben Sperry","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg","caption":"Ben Sperry"},"sameAs":["http:\/\/bensperry.com","https:\/\/x.com\/benjsperry"],"url":"https:\/\/ionic.io\/blog\/author\/benjsperry"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2013\/10\/ionicons-preview.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1639"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}