<p>Published on <a href="https://blog.prototypr.io/a-wholly-incomplete-visual-guide-on-how-to-use-icons-on-things-ad2a4f1f614b?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Jory Raphael </p>
<h4>In which I provide some examples of icons on things and stuff.</h4>
<p>I recently launched my first Kickstarter campaign for a versatile <a href="https://www.kickstarter.com/projects/sensibleworld/symbolicons-pro-your-friendly-versatile-go-to-icon?ref=1jp214">set of icons called Symbolicons Pro</a>. The majority of backers are either designers or developers, but there are a few who simply love icons, but just don’t know what they’d use them for. In fact, a friend of mine recently said:</p>
<blockquote><p>I simply love icons, but I just don’t know what I’d use them for.</p></blockquote>
<p>Well, friend, I’ve compiled this handy list of ten common icon use-cases for your reading and viewing pleasure. Whether you’re a designer, a developer, a marketer, or simply a fantastic parent, icons can improve your life. Buckle up, hold onto your pants, and get ready to see some <strong><em>ICONS IN ACTION</em></strong>™.</p>
<h4>01. Interfaces</h4>
<p>Do you have an interface that needs some design? Well, you’re in luck. Icons are great for this. In the example below, icons are used for video playback controls. Were you to watch the video, you would also notice the cat is about to pounce on an icon of a mouse.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tTflhA-H3tldDveQ2TBhSQ.png">Cat photo by <a href="https://unsplash.com/photos/zBvVuRJ71vU?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Marko Blažević</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>. I know, I know. This is a photo of a cat. I overlaid an icon-based interface on top to make it look like a video to help prove my point.</p>
<h4>02. Marketing Thangs</h4>
<p>Direct mailers. Business cards. Letterhead. Thank you cards. Social media posts. You name it. Icons can be used on all of these. Icons <em>should</em> be used on all of these.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_GMTjCS8BzTZhAPOYCdqqA.png">Eye Heart Sheep? What? Oh… wait… I love you. You. Ewe. Get it? Nevermind. Photo by <a href="https://unsplash.com/photos/vg8UF3dx4pw?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Annie Spratt</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>.<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IWcK6o2JIBbqmEe3DAt63g.png">Blurring a photo and adding an icon on top is a proven way to increase the number of followers you have on social media. Photo by <a href="https://unsplash.com/photos/Pt_YmiYm7a4?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Cel Lisboa</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>
<h4>03. Mobile Apps + Websites</h4>
<p>Did you know that every single mobile app in the history of the entire world contains some sort of icon? <em>Fact.</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pWO0LBDbAzKHTDI5--pcYg.png">Icons are great on app toolbars, but you knew that already. Photo of boombox by <a href="https://unsplash.com/photos/8e0EHPUx3Mo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Eric Nopanen</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>. Photo of hand by <a href="https://unsplash.com/photos/LUgHXvLe_kM?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">NeONBRAND</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>. TWO photos?! Inception.</p>
<p>And every single website produced in the last ten years has included a “features” area that showcases icons. <em>Double fact.</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*F2m6vIk7Irx8i0QwefKKfw.png">Since early 2010, it has been a requirement that all website designs include an icon-based features area. Photo by <a href="https://unsplash.com/photos/T8LMIN09-mo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Goran Ivos</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>
<h4>04. Tattoos</h4>
<p>You can even use icons as tattoos! And hey, if you want to use an icon from Symbolicons Pro as a tattoo, I’ll give it to you for free. Plus, icons are easier to ink than flame-ringed dragons devouring their own tails while alighting on a bed of roses.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RECXLTBocajVIvqXTxprMg.png">Arm photo by <a href="https://unsplash.com/photos/1SMJXxfzP9E?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Felix Russell-Saw</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>. Tattoo added using the magic of computers.</p>
<h4>05. Signage</h4>
<p>Icons help us get where we want to go. And by “go”, I mean pee and poop. They are also helpful for other things.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BEHiL6a2Ps6H9ZKeHgkBFw.png">This photo shows where you can find people, wheelchairs, and interpretive dancers. I think WC stands for Wicked Cool. So, you know, I’d definitely follow this sign. Photo by <a href="https://unsplash.com/photos/gWFXgcH-LeU?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Paul Green</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ltz30PtVF9NRf4cGn6FLuw.png">This sign has two icons layered on top of each other. That means it’s twice as effective. Photo by <a href="https://unsplash.com/photos/LTEo69JUv7o?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Gemma Evans</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>
<h4>06. Maps</h4>
<p>Like signage, icons on maps are a key element of wayfinding. They save space when used correctly, and can often surpass language barriers, making them a more universal form of communication. In the example below, icons lead the way to both playgrounds and cocktails.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SYaOtPOMTu6QKTPfv4CM-Q.png">This is a map of Basin Harbor in Vermont. I’m going to get a 🍦from the Harbor Store and then take a 🏊 when I’m finished ✏️ this article.</p>
<h4>07. James Bond Posters</h4>
<p>Yes, even posters containing visual metaphors for each 007 movie title consist entirely of icons.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0zLR6B7vKF_p8X6pgcZKbA.png">Can you believe what a beautiful photo I took? These were just a few things I had hanging around my house.</p>
<h4>08. Okay, I’m running out of ideas. Maybe I should have split Apps and Websites into separate categories.</h4>
<h4>09. Labels</h4>
<p>Sometimes you need to label things. In the example below, I placed icons of poop on the faces of my children. And yes, before you ask, I have begun to re-evaluate my life choices. Has it really come to this? Using my children as props in a less-than-serious-but-hopefully-at-least-a-little-helpful Medium article? What have I become? Oh man. That is the second mention of poop. I have a problem.</p>
<p>You can also use icons to label folders.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wTHmNh4FiNVDVq9a1tWMrA.png">These are my kids. Sometimes they are little sh*ts. They learned it from watching me.<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dn_cFvc_tZvt44napwlk4Q.png">A helpful guide to decode laundry symbols. Credit <a href="https://twitter.com/technicallyron/status/570965607971209216?lang=en">TechnicallyRon</a>.<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wpftS88a3NhW-aagNH4o_A.jpeg">This photo didn’t even need editing. Those are legit icons on labels. Photo by <a href="https://unsplash.com/photos/aw4ctKdmC7k?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jez Timms</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></p>
<h4>10. Your imagination.</h4>
<p>That’s right. The tenth way you can use icons is completely up to you and your imagination. But here are some final ideas, with my apologies to Dr. Seuss:</p>
<p><strong>You could use icons of a boat!<br />You could use icons of a goat.<br />You could use icons of the rain.<br />And of the dark. And of a train.<br />And of a car. And of a tree.<br />Icons are so good so good you see!</strong></p>
<p><strong>So you will use icons of a box.<br />And you will use icons of a fox.<br />And you will use icons of a house.<br />And you will use icons of a mouse.<br />And you will use icons here and there.<br />Say! You can use icons anywhere!</strong></p>
<p><em>And if you do want to end up using icons anywhere, I’d suggest checking out my Kickstarter campaign for Symbolicons Pro. You won’t be disappointed. </em><a href="https://www.kickstarter.com/projects/sensibleworld/symbolicons-pro-your-friendly-versatile-go-to-icon?ref=1jp214"><em>You can back the project here.</em></a></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.kickstarter.com%2Fprojects%2Fsensibleworld%2Fsymbolicons-pro-your-friendly-versatile-go-to-icon%2Fwidget%2Fvideo.html&amp;url=https%3A%2F%2Fwww.kickstarter.com%2Fprojects%2Fsensibleworld%2Fsymbolicons-pro-your-friendly-versatile-go-to-icon&#038;image=https%3A%2F%2Fksr-ugc.imgix.net%2Fassets%2F016%2F967%2F334%2Fbf55658239075e4a4f07c10efcd5a319_original.png%3Fcrop%3Dfaces%26w%3D560%26h%3D315%26fit%3Dcrop%26v%3D1496671685%26auto%3Dformat%26q%3D92%26s%3D794d059b37bc819f0a85878c02d9a99d&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=kickstarter" width="480" height="270" frameborder="0"><a href="https://medium.com/media/5cffcb4f628a830377ad76c6e1d31395/href">https://medium.com/media/5cffcb4f628a830377ad76c6e1d31395/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=ad2a4f1f614b" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/a-wholly-incomplete-visual-guide-on-how-to-use-icons-on-things-ad2a4f1f614b">A wholly incomplete visual guide on how to use icons on things.</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


A wholly incomplete visual guide on how to use icons on things.

In which I provide some examples of icons on things and stuff.

Top Stories