How to Make Icons for Applications on Android and iOS

Make stunning, attention-grabbing icons for your mobile applications.

Icons for Android and iOS are graphics for a mobile application required to display the program on the screen of a mobile device. Almost all objects in the interface of mobile platforms are displayed using icons, as they simplify identification and visual search.

A quick glance at a graphic element is often enough to make a decision about downloading an application. Ideally, the icon should explain the purpose of the program without having to read the description.

Do you need an ICON ONLY button without screwing up the accessibility?

The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple's latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O'Hara have a pair of articles that nicely lay out all the options and present actual research on this topic.

If you just want to be told what to do, I'd go for the just use some text in the button approach:

<button aria-expanded="false" id="menu-trigger">
   <svg viewBox="0 0 32 32" width="32px" height="32px" 
     aria-hidden="true" focusable="false">
     <!-- svg content -->
    </svg>
    Menu
</button>

Sara says There is no One Way to Rule Them All, but it does seem like you really need to use actual text inside that button and either hide it or override it somehow. SVG alone has no rock solid way to provide an accessible name to a button or link.

Funny how long this has been a tricky pattern to get right.

The post Do you need an ICON ONLY button without screwing up the accessibility? appeared first on CSS-Tricks.

Freebie: Emojious Icons (AI, SVG, PNG)

Emojious_featured

Today we’re happy to share an exclusive set of 50 icons from the Emojious icon pack. This hand picked selection spans various categories from the more than 1200 quirky, happy icons for your next joyful project.

About the free Emojious icon set

This colorful icon set contains 50 adorable illustrations with a unique, eye-catching look. Each icon has lots of personality and fits to the modern tech and app world with its stylish color theme and symbolism.

Emojious_detail

The following topics are represented: minion-batman, mobile, octopus-angry, pluger, polygon, puzzle, shit-sunglasses, short-hair, spray, troller, twitter, vault, water-bottle, basket, boat, facebook, flag, gift, grave, link, macpro, Predator, search, student-female, sun, topview, umbrella-rain, vision-jew, Walle-female, bones, chat, christian-love, clap, cop-male, cucumber, family-institution, fear, heart-hand, knight, mirror, monkey-silent, parka, pig, planets, potion, airbaloon, android, arcade, bean and bee.

The icon set comes in the following formats: SVG, AI and differently sized optimized PNGs.

Preview

Check out a preview of the icon set:

Emojious_preview

Download the free Emojious icon set

You can download the freebie here:

The icons are free for personal and commercial use. Please don’t resell or redistribute them.

About Emojious PRO

Emojious PRO is an innovative icon set that collects 3700 icons, each with a smile, making it the first, quirky and eye-catching five-star product. It currently has 26 categories and it’s a growing set.

EmojiousPro_preview

With PRO version you get 3 styles for each icon and free updates for life. Head over to emojious.com to check out all the icons.

We offer a special discount for all Codrops readers! Use coupon “CODROP30” for 30% off!

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your exclusive freebie on Codrops just drop us a line.

Freebie: Emojious Icons (AI, SVG, PNG) was written by Emojious and published on Codrops.