Editing Icon design

{{Short description|Genre of graphic design}}
'''Icon design''' is the process of designing graphic [[symbol|symbols]] to represent physical objects ([[Pictogram|pictograms]]) and abstract concepts ([[Ideogram|ideograms]]). In the context of [[software application]]s, an [[Icon (computing)|icon]] often represents a [[computer program|program]], an action, or data on a [[computer]].<ref>{{Cite news |date=2016-05-13 |title=Design In The Age Of The App Icon |url=https://www.fastcompany.com/3059854/design-in-the-age-of-the-app-icon |archive-url=http://web.archive.org/web/20220912080249/https://www.fastcompany.com/3059854/design-in-the-age-of-the-app-icon |archive-date=2022-09-12 |access-date=2025-03-22 |work=Fast Company |language=en-US}}</ref>

== Usage and process ==
Though the design of icons has existed as long as pictograms and ideograms have, modern icon design primarily exists in maps, public infrastructure like [[Wayfinding (urban or indoor)|wayfinding]], and user interfaces for video games, computers, and mobile devices. Physical venues and events make use of either existing symbols from governments (such as the [[DOT pictograms]]) or custom icon designs. Custom icons are most visible as [[Application software|application]] icons, [[favicon]]s, and [[user interface]] toolbar icons on computers and mobile devices.<ref name=":0">{{Cite web |last=Pavlus |first=John |date=September 18, 2015 |title=Masters of the Small Canvas |url=https://www.bloomberg.com/news/articles/2015-09-17/drawing-icons-and-emoticons-for-screens-of-all-sizes |url-status=live}}</ref><ref>{{Cite web |last=Schonfeld |first=Erick |date=2008-06-07 |title=The Story Behind Google's New Favicon |url=https://techcrunch.com/2008/06/07/the-story-behind-googles-new-favicon/ |access-date=2025-03-22 |website=TechCrunch |language=en-US}}</ref>

Modern app icons have a maximum size of 1024×1024 pixels or greater, however icon design involves creating artwork at various sizes for legibility.<ref name=":0" /> At smaller sizes, designers often eliminate or reduce unnecessary details while exaggerating important details. Especially for [[Display resolution|lower-density displays]], icons are [[Font hinting|hinted]] at various sizes similar to digital [[type design]] by aligning shapes to pixel boundaries as to ensure visual clarity. Icons may also need to be altered for different display modes, such as [[Light-on-dark color scheme|dark mode]]. The design of icon sets includes consideration to a shared elements, such as a color palette, perspective, and style.<ref>{{Cite web |last=Warren |first=Tom |date=2019-12-12 |title=Microsoft reveals new Windows logo design and 100 modern app icons |url=https://www.theverge.com/2019/12/12/21012997/microsoft-new-windows-logo-fluent-design-icons |access-date=2025-03-22 |website=The Verge |language=en-US}}</ref><ref>{{Cite web |date=2018-08-23 |title=Facebook Testing New Emoji Designs |url=https://blog.emojipedia.org/facebook-testing-new-emoji-designs/ |access-date=2025-03-22 |website=Emojipedia - The Latest Emoji News |language=en}}</ref>

The process of icon design includes defining a metaphor, drawing an illustration, creating any necessary alterations for various sizes, and occasionally assembling files into a folder, [[ICO (file format)|ICO]] file, or [[Apple Icon Image format|ICNS]] file. [[Vector graphics|Vector]] icons in apps and websites are usually [[SVG]] files.

Due to their high visibility and relation to [[logo]] design and [[Brand|branding]], new app icons are frequently criticized.<ref>{{Cite news |title=Rebranding Lessons From Airbnb, Instagram, and Google |url=https://www.inc.com/anna-guerrero/airbnb-instagram-google-what-marketers-can-learn-from-these-companies-rebrands.html |archive-url=http://web.archive.org/web/20230522170216/https://www.inc.com/anna-guerrero/airbnb-instagram-google-what-marketers-can-learn-from-these-companies-rebrands.html |archive-date=2023-05-22 |access-date=2025-03-22 |work=Inc.com |language=en}}</ref><ref>{{Cite news |last=Chen |first=Brian X. |title=Steve Jobs: iTunes 10 Icon Does Not ‘Suck’ |url=https://www.wired.com/2010/09/steve-jobs-itunes/ |access-date=2025-03-22 |work=Wired |language=en-US |issn=1059-1028}}</ref><ref>{{Cite web |last=updated |first=Daniel John last |date=2021-03-01 |title=Amazon just fixed its controversial new app icon |url=https://www.creativebloq.com/news/amazon-fixes-controversial-app-icon |access-date=2025-03-22 |website=Creative Bloq |language=en}}</ref><ref>{{Cite web |last=Beck |first=Kellen |date=2016-05-13 |title=10 app icon redesigns: The good, the bad and the ugly |url=https://mashable.com/article/10-icon-app-redesign-instagram |access-date=2025-03-22 |website=Mashable |language=en}}</ref>

== Notable icon designers ==
{{incomplete list|date=November 2017}}

* '''Masaru Katsumi''' - [[1964 Summer Olympics]] in Tokyo
* '''[[Lance Wyman]]''' - [[1968 Summer Olympics]] in Mexico City, [[National Zoological Park (United States)|National Zoo]]
* '''[[Rajie Cook]]''' & '''Dan Shanosky''' - [[DOT pictograms|USDOT pictograms]]
* '''[[Otl Aicher|Otto Aicher]]''' - [[1972 Summer Olympics]] in Munich
* '''[[Susan Kare]]''' - [[Classic Mac OS]], [[Facebook]] gifts<ref>{{Cite web |title=Buy a virtual cupcake for breast cancer, on Facebook |url=https://www.cnet.com/tech/services-and-software/buy-a-virtual-cupcake-for-breast-cancer-on-facebook/ |access-date=2025-03-22 |website=CNET |language=en}}</ref>
* [[Jon Hicks (designer)|'''Jon Hicks''']] - [[Firefox]], [[Skype]] [[emoticon]]s,<ref>{{Cite web|url=https://hicksdesign.co.uk/journal/new-skype-emoticons|title=New Skype Emoticons {{!}} Hicks Journal|website=hicksdesign.co.uk|language=en|access-date=2018-10-05}}</ref> Icon Handbook<ref>{{Cite book|title=The icon handbook|last=Jon|first=Hicks|others=Noun Project.|year=2011 |isbn=9781907828034|location=United Kingdom|oclc=778700859}}</ref>
* '''[[The Iconfactory]]''' - [[Windows XP]], [[Windows Vista]],<ref>{{Cite web |last=Oiaga |first=Marius |date=2007-05-02 |title=Windows Vista Icons - The Prototypes |url=https://news.softpedia.com/news/Windows-Vista-Icons-The-Lost-Prototypes-53713.shtml |access-date=2025-03-22 |website=softpedia |language=english}}</ref> [[Twitter, Inc.|Twitter]] emoji<ref>{{Cite web |date=2015-06-26 |title=The designer behind Twitter's emoji suite: 'Of course I love the smiley poop' |url=https://digiday.com/media/designer-behind-twitters-new-emoji-suite-course-love-smiley-poop/ |access-date=2025-03-22 |website=Digiday |language=en-US}}</ref>

==See also==
* [[Icon (computing)]] {{section link | Icon (computing)| Icon creation | nopage=y}}
* [[Skeuomorph]]

==References==
<references />

==External links==
* [https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/ iOS Human Interface Guidelines — App Icon]
* [https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/Designing.html macOS Human Interface Guidelines — Designing App Icons]
* [https://web.archive.org/web/20170405170647/https://www.microsoft.com/en-us/design/icons Microsoft Design Language — Icons]
* [https://docs.microsoft.com/en-us/windows/uwp/style/icons Microsoft Icon guidelines for UWP apps]
* [https://docs.microsoft.com/en-us/windows/win32/uxguide/vis-icons Microsoft guidelines on designing Windows Aero Icons]
* [https://docs.microsoft.com/en-us/previous-versions/ms997636(v=msdn.10) Microsoft guidelines on designing Windows XP icons]
* [https://web.archive.org/web/20150518002812/http://developer.android.com/design/style/iconography.html Android guidelines on icon design]
{{Design}}

[[Category:Computer icons| ]]