Iconography

Your constantly-updated definition of Iconography and collection of videos and articles
84 shares

What is Iconography?

Iconography in user experience (UX) design refers to a visual language geared to product identity, where designers craft or adapt icons—simplified illustrations that help users navigate across digital environments. Designers create clear, unambiguous icons and use them consistently to communicate effectively so users can instantly recognize their meaning and achieve goals faster.    

CEO of Experience Dynamics, Frank Spillers explains important points about Google’s Material Design, a helpful resource in the design of icons and more. 

Show Hide video transcript
  1. Transcript loading…
    

Why is Iconography Important?

The definition of iconography—as well as the design and application of iconography sets—has evolved with computing and design over many years. Particularly with the advent of home computing in the early 1980s—and especially with the common use of the computer mouse—the need to represent interactive functionality on screens became profound. Icons are a vital component of any graphic user interface (GUI).  

Icons are essentially a form of design language that encapsulate concepts in simple shapes. To a certain extent, they mirror pictograms in graphic design and infrastructure works—such as those inside buildings and on roadsides, like “for customers with disabilities” or “to airport”—for users to understand at a glance the function or content on their screens. Effective visual iconography is far more than a skill designers need to create visual elements to improve the user experience and interactive design of a digital product. Icons represent keys to accessing vast dimensions of usability in digital products. Without them—and unless voice-controlled user interfaces (VUIs) become the dominant form—users would encounter severe pain points and obstacles to their goals.   

A screenshot showing Google Fonts and Material Design guideline options.

Google’s Material Design icons are customizable options.

© Google, Fair Use

In iconography for web design and apps, well-designed iconic symbols are vital cues for how a user interacts with a user interface (UI). The importance of icons for digital interfaces becomes even more apparent when one considers the relationship between a signifier and an affordance in the physical world. For instance, a door is an affordance. Meanwhile, the presence of a push plate—as opposed to a “Pull” handle—helps users realize what they must do to use the door in the right direction. If the plate also features the word “Push,” that’s the signifier that assures users of what to do. Other examples include the red “Exit” sign or a pictogram of a person running—set above a fire exit. Since icons on digital devices must offer more intricate functionalities—and more frequently on small screens—designers must leverage principles of iconography in UI design well to guide their target audience. They need to offer users the most effective types of icons to suit their needs for a multitude of tasks and goals.    

Some iconography examples have become firmly entrenched in the modern user experience. The trash can—later the recycle bin—was an early example of an icon in an interface. It’s a skeuomorphic design. This means the trash can mimics its real-world counterpart. Early computer users also came to associate the icon of the then-common floppy disk with the function of saving work such as a text file. These two physical items—the floppy having long since fallen out of everyday use—are examples of how iconography becomes established and then indelibly stamped in the public consciousness. Icons that succeed and become “household names” are like shorthand for the brain to respond to—like muscle memory.   

An image showing Resemblance icons.

Some icons are mainstays of UI design, such as these ones that resemble their real-world counterparts.

© Sandra Boicheva, Fair Use

What are the Benefits of Effective Iconography?

Designers continue to create, adapt and use icons to:   

1. Make It Easy for Users to Recognize Function

One main purpose of icons is that they should be immediately recognizable—a quality that makes them effective for quick communication in user interfaces. Their ability to encapsulate information swiftly is especially valuable in environments where speed and clarity are vital. Especially in mobile contexts—the more common way users engage brands in the 21st century—this is a particularly important consideration for designers to accommodate in icons. When designers use a well-crafted icon style that users find familiar or can learn at a glance, it means users can navigate new interfaces more efficiently. 

2. Save Space in Design 

In digital design—especially on smartphone screens—space is a premium commodity. Icons are compact and allow a limited interface area to feature multiple functions. This space efficiency makes them indispensable in toolbars and menus where horizontal or vertical real estate is limited. So, designers can create clean and uncluttered user interfaces.   

3. Leverage the Universal Appeal of Icons

Icons transcend linguistic barriers, so they’re a universal component of digital communication. They eliminate the need for translation in global applications—particularly helpful for international software. An envelope icon indicates email, for example. Icons can form part of a seamless user experience across different cultures and languages—slashing the potential for confusion while boosting accessibility

Author and Human-Computer Interaction Expert, Professor Alan Dix explains important points about how to design with culture in mind: 

Show Hide video transcript
  1. Transcript loading…
Video copyright info

Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons

Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg

Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg

Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg

   

4. Customize a Brand’s Presence Through Its Iconography

Designers tend to align the icon symbols they use on digital products like websites and mobile apps with the look and feel of their brand. It’s important to present users with iconography that’s familiar to them. However, if a designer can fine-tune this sense to match the personality of their brand—including a suitable color palette—they can welcome users and customers that much further into a seamless experience.

An image showing advice about how to make icons.

One of the keys to a seamless user experience is that users should not need to pause and think about the interface or its icons.

© Andrew Kucheriavy, Fair Use

Best Practices and Tips to Design Icons

Designers can utilize libraries like Google Material Design iconography or start working on their own from scratch. In any case, when designers embark on icon design, they should:   

  1. Establish a clear, consistent visual language: It should match the brand’s personality and the users’ expectations. So, it’s vital to conduct user research and follow the brand’s guidelines in a design brief. For example, a “traditional” bank website will call for a look that boosts trust, with a careful application of sedate colors and symmetry or visual balance. Meanwhile, an entertainment-oriented app can afford to embrace a certain degree of playfulness. In any case, designers should consider factors such as the following:   

    • Line weight: For example, 2 pixels for a line weight is a common feature.  

    • Fill style: Designers choose whether they want to stroke icons or fill them. If they stroke them, it’s important to have the same line thickness.  

    An illustration showing the difference between stroke and fill icons.

    Strokes and fills—important considerations for a brand’s icon set.

    © Bonnie Kate Wolf, Fair Use

    • Corner radius: This is the degree to which the icon has rounded corners. 

An image showing two versions of iOS app icons.

This image marks the change when iOS app corners became distinctly more rounded.

© Appifier, Fair Use

  1. Use a grid system to keep the alignment and balance effective: It’s vital to make sure that each icon is in harmony visually within the set.    

A diagram illustrating icon size, icon  layout, baseline grid, and alignment and placement.

The icon’s live area is the part visible to users. An icon 24×24 dp (density-independent pixels) in overall size would have an effective live area of 20×20 dp—so, with 2-pixel padding.

© Shriya Pandey, Fair Use

  1. Make sure icons are ultra-quick for users to recognize: It’s best to use ones that users are used to. Familiar icons that have stood the test of time are there for consistent application. Designers can apply Home (house icon), Print (printer) and Search (magnifying glass) as reliable examples.  

A screenshot of a screen showing Amazon's music player.

The Play button, along with next track and previous track symbols and others, are universal to recognize, on Amazon and Spotify, for example.

© Amazon, Fair Use

A screenshot showing Spotify's music player.

© Spotify, Fair Use

  1. Use icons to save space but keep fat-finger friendly as a rule of thumb for mobile users: Users need to recognize icons in toolbars and elsewhere, so they shouldn’t be too detailed or hard to decipher. Plus, users need to be able to enjoy great accessibility, including with fat-finger friendly icon sizes (44 pixels).  

  1. Make icons describe function and purpose in visual terms: They’re not for decoration. Designers should consider if their product’s users could tell what an icon means without any help from labeling.    

  1. Always use a single icon set as per design and branding guidelines: In the same sense that microcopy needs to be consistent (e.g., “Remove item” or “Delete”), so do the icons on a site or app. One icon should have a single function, and there shouldn’t be multiple icons for the same function.    

  1. Label for clarity, as needed: On a toolbar, for example, be sure to label icons for clarity. Labels should go on the right of the icon or beneath it. Be sure to leave enough space between the icon and its label to maximize readability. 

  1. Beware of icons that might be ambiguous to users: Even if one thinks that sheer weight of usage over the decades should have indelibly stamped what some icons mean in the popular psyche, designers shouldn’t take the gamble if in doubt. For example, hamburger menus have historically proved problematic in this way—most interfaces implement hamburger icons to indicate the main navigation menu, but some don’t. Star and heart icons also run into grey areas in the sense that some users may not associate them with bookmarking and favorites, respectively.  

An image showing 4 sets of conflicting icons.

Two icons can mean the same thing.

© Sandra Boicheva, Fair Use

  1. Keep icons simple: Don’t insert too much graphic detail or make complex arrangements. Icons need to be schematic and recognizable at first glance.   

  1. Use distinct shapes and colors: If users can recognize shapes and colors that represent distinct functions, they’ll be able to act accordingly and without confusion. 

  1.  Use text labels if the need arises: Sometimes, there can be doubt over how to encapsulate a function within—or indicate content using—an icon. Text labels can serve either to complement the icon or to serve as a button in its own right.

A screenshot of YouTube's home page.

Some brands apply a combination of text labels and icons—as with YouTube (above)—and some utilize more text buttons, like Bank of America, below.

© YouTube, Fair Use

A screenshot of Bank of America's home page.

© Bank of America, Fair Use

  1. Remember visual hierarchy: Consider how the icons work as a set on each screen. It’s vital to arrange them so they complement the interface and deliver the most intuitive experience to users. 

Watch our video to understand more about visual hierarchy: 

Show Hide video transcript
  1. Transcript loading…
   

  1. Test icons with real users: This is vital. As straightforward and intuitive as designers believe their icon creations may be, only through user testing can they get the feedback they may need to make refinement to icons—to ensure they’re intuitive and effective. Remember, simplicity in design aids user recognition and understanding. This is why effective icons remain an indispensable tool in UI design   

UX Strategist and Consultant, William Hudson explains the importance of user testing: 

Show Hide video transcript
  1. Transcript loading…
   

What Tools are Helpful to Design Icons?

When it comes to choices in iconography, Google’s Material Design is an example of a popular resource to work with. Designers who want to create their own icons have many options, too. The following tools are among the most helpful with features like collaborative work facilitation and plugin libraries:   

  • Adobe Illustrator: Vector-based, this tool is good for designing icons, logos and more.   

  • Figma: This is a popular choice to make UI elements with—and that includes icon sets.   

  • Sketch: This vector-based software is easy to learn.   

A screenshot of a page offering a template.

Designers can use icon templates as well.

© Gavin McFarland, Fair Use

Overall, a well-designed set of icons is a key part of product design. Users come to know—and love—the brands they choose to interact with through a journey of discovery. The best of these journeys invariably include those all-important seamless experiences. Like the logo, a brand’s iconography is a form of visual communication with its users and customers.  

Many designers don’t venture out to create icons in a custom set for their client’s or brand’s digital products. However, the creations of designers who do stretch creatively to design system iconography, symbols and more intuitive ways to interact with a brand can be impressive. The most effective of these may prove to strengthen the links between users, customers and the brands they love in a more engaging and delightful UX. Some icons may join the core group of household symbols like the recycle bin, and through sheer frequency of use become iconic.    

Learn More about Iconography

Take our Visual Design: The Ultimate Guide course. 

Consult Guide to Iconography Design for Enhancing Your UX/UI Abilities  by Bonnie Kate Wolf for further insights.   

Go to Icon Usability - Best UX Tips and Design Guidelines by Andrew Kucheriavy for more information and guidelines. 

See UI Icons: Explaining Every Single Type with Inspirational Examples by Sandra Boicheva for more details and tips. 

Read How to Design Better Icons by Buninux for more insights, tips and information. 

Refer to Google’s Material Design guidelines, including for icons. 

Questions about Iconography

How do you create effective icons for user interfaces?

To create effective UI icons, keep simplicity, clarity and consistency as your focus. Simple icons are things that users can recognize and understand quickly. Avoid unnecessary details—they can clutter your design and confuse users. 

  1. Use simple shapes and lines: Choose basic shapes that users can easily identify. Simplify the icon's design to its most essential form. 

  1. Maintain clarity: Make sure the icon's purpose is clear for users at a glance. Test your icons with users to confirm they understand each intended function. 

  1. Keep them consistent: Use a consistent style throughout the interface; that means consistency in line weight, color palette and size—for a cohesive and professional look. 

  1. Follow established conventions: Use familiar symbols that users recognize—for instance, a magnifying glass for search or a trash can for delete. 

  1. Test for scalability: Icons should be clear at various sizes. Test your icons on different devices and resolutions. 

  1. Add labels when you need to: If the icon's meaning isn’t clear immediately, add a label so users can understand the icon's function.  

  1. Keep an eye on hierarchy: See how the icons look together on the screen; is the hierarchy effective? 

Take our Visual Design: The Ultimate Guide course. 

Watch our video to understand more about visual hierarchy: 

Show Hide video transcript
  1. Transcript loading…
   

What are the differences between flat and skeuomorphic icon design?

Flat icon design and skeuomorphic icon design are different both in their visual style and the philosophy behind each. 

Flat Icon Design

  • Flat icons use simple shapes and colors—no textures, gradients or shadows. 

  • Designers focus on clear minimalism—prioritize functionality over decoration. 

  • Flat icons look modern and clean. Plus, they load quickly, which improves performance. 

Skeuomorphic Icon Design

  • Skeuomorphic icons mimic real-world objects. They have textures, shadows and gradients for a three-dimensional effect. 

  • Designers aim to make digital interfaces feel familiar, so they replicate physical objects like magnifying glasses. 

  • Skeuomorphic icons often look detailed and realistic. They can help users understand new technology since they relate it to real-world items. 

Read our Topic Definition of Flat Design

Read our Topic Definition of Skeuomorphism

How should I approach the use of color in iconography?

It’s best to approach this with a clear strategy. Try the following: 

  1. Make sure your colors are in line with your brand’s identity: Use brand colors consistently; it helps users recognize your icons quickly. Refer to your brand guidelines. 

  1. Think about color meanings and cultural differences: For instance, red often signifies urgency or errors, while green indicates success—or safety. Research your target audience so you know how they might look on colors. 

  1. Make accessibility a priority: Make sure there’s enough contrast between icon colors and backgrounds; it will help with visibility. Tools like WebAIM’s contrast checker will help you meet accessibility standards. 

  1. Use color sparingly: Too many colors can confuse users. Instead, use color to highlight key icons or show different states (e.g, active or inactive). 

  1. Test your icons in various contexts: View them on various devices and backgrounds to see that they remain effective. 

Read our piece, Understand Color Symbolism

Watch our video on accessibility to understand more about this vital subject: 

Show Hide video transcript
  1. Transcript loading…
 

What are some common mistakes to avoid in icon design?

There are several common mistakes in icon design you should be aware of, so you can make sure your icons are effective and user-friendly. These include: 

  1. Don’t use overly complex designs: Icons should be simple and recognizable at a glance. Complex icons can confuse users and don’t communicate their purpose quickly enough. 

  1. Avoid inconsistency: Use a consistent style, size and color scheme across all your icons. Inconsistent icons disrupt the visual harmony and make your interface look unprofessional. 

  1. Don’t rely solely on color to convey meaning: Users with color blindness might not distinguish certain colors. Combine color with other visual elements, such as shapes or labels, to ensure clarity. 

  1. Make sure your icons are universally understandable: Avoid culturally specific symbols that might confuse international users. For example, a mailbox icon might not make sense to users in countries where physical mailboxes are uncommon. 

  1. Test your icons on different devices and screen sizes: Icons should look clear and sharp on all resolutions. Blurry or pixelated icons can frustrate users and spoil the user experience. 

Watch as Author and Human-Computer Interaction Expert, Professor Alan Dix explains why it’s important to design with culture in mind: 

Show Hide video transcript
  1. Transcript loading…
Video copyright info

Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons

Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg

Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg

Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg

 

Take our Visual Design: The Ultimate Guide course. 

How do I choose the right style for my icons?

You can do several things, such as: 

  1. Match your icon style to your brand identity: If your brand feels modern and sleek, use minimalist and clean icons. If your brand feels playful and fun, opt for colorful and whimsical icons. This alignment creates a cohesive visual experience for users. 

  1. Consider the context of where you’ll use the icons: For example, use simple and clear icons for mobile apps so users can read easily on small screens. For websites, you might have some more flexibility to use somewhat more detailed icons. 

  1. Keep things consistent: Choose a style and stick with it across all icons to keep a harmonious look. Mix-and-match styles can confuse users—and make your interface look unprofessional. 

  1. Make clarity a priority: Icons should communicate their purpose without your needing to include text. Don’t use abstract designs that might confuse users. 

  1. Test your icons with your target audience: Get and collect feedback to see if users understand—and appreciate—the style. Make adjustments according to their input so you make sure your icons meet their needs. 

Take our Visual Design: The Ultimate Guide course. 

UX Strategist and Consultant, William Hudson explains important points about usability testing: 

Show Hide video transcript
  1. Transcript loading…
 

What role does iconography play in branding?

Iconography plays a crucial role in branding; here are some ways: 

  1. Icons help users recognize your brand quickly: Unique and consistent icon designs create a visual identity that users associate with your brand. For example, Apple’s simple, sleek icons mirror its innovative and modern brand image. 

  1. Icons communicate messages efficiently: They carry complex ideas in a compact visual form. For instance, a shopping cart icon immediately tells users where to find their purchases. 

  1. Icons help users as they guide navigation and highlight important actions: Clear and intuitive icons help users interact with your product effortlessly—a hallmark of a positive experience. 

  1. Icons support accessibility: They give visual cues that go beyond language barriers. Universal icons, such as the envelope for email, make sure that users around the world understand their functions. 

Read our piece, Understand Color Symbolism

Watch our video on accessibility to understand more about this vital subject: 

Show Hide video transcript
  1. Transcript loading…
 

What are the benefits of using icon libraries?

Here are some main ones; icon libraries: 

  1. Save you time: Designers can access a wide range of pre-made icons and not have to make each icon from scratch. 

  1. Make sure of consistency: All icons in a library share a unified style—and so keep a cohesive look across your project, improve users’ experiences, plus make your design appear professional. 

  1. Offer variety: They provide numerous icons for different purposes, allowing designers to find the perfect match for their needs. This variety ensures that you can cover all aspects of your design without compromising on style. 

  1. Make for easy customization: Designers can often adjust the size, color and other icon properties for their brand-specific requirements. 

  1. Frequently update: Regular updates give you access to the latest design trends and technologies—helping keep your project modern and relevant. 

Take our Visual Design: The Ultimate Guide course. 

Read our Topic Definition of Design Systems for more on icons and other relevant subject. 

How do icons affect the visual hierarchy of a design?

Icons are important for this since they guide users' attention and clarify information for them. More specifically, icons: 

  1. Draw the eye to important elements: For icons that are next to key actions or information, these elements stand out—for example, a trash can icon highlights the delete function. 

  1. Help organize content: They break up text-heavy sections and give visual cues. Users find it easier to scan and understand, then. 

  1. Indicate what the functionality is: They show users what actions they can take, such as play, pause or share—helping them understand at a glance what to do. 

  1. Create emphasis: Larger or more colorful icons draw more attention, so helping users to prioritize information, such as a red warning icon for critical issues. 

  1. Keep the visual hierarchy clear: When they’re in consistent use and follow a cohesive style, icons are part of a structured and professional design. 

Take our Visual Design: The Ultimate Guide course. 

Watch our video to understand more about visual hierarchy: 

Show Hide video transcript
  1. Transcript loading…
   

How can I design icons that work well in both light and dark modes?

Try to follow these steps: 

  1. Use dual-tone icons: Make two versions of each icon—one for light mode and one for dark. 

  1. Make high contrast a priority: Make sure your icons contrast well against both light and dark backgrounds. Don’t use colors that blend into the background. 

  1. Outline your icons: A border or outline on your icons helps keep visibility high on different backgrounds, and can give a clear edge whatever the background color is. 

  1. Test your icons in both modes: Fine-tune any adjustments to make sure of a high level of consistency and readability. 

  1. Use adaptive icons if you can: Get icons that automatically adjust based on the user’s mode preference.  

Take our Visual Design: The Ultimate Guide course. 

Read our Topic Definition of Dark Mode

What are some highly cited scientific articles about iconography?
  1. Silvennoinen, J. (2016). Aesthetic Appeal and Visual Usability in Four Icon Design Eras [PDF]. Typeset.io.  

This publication looks at the influence of different icon design styles from various eras on aesthetic appeal and usability experiences. The study uses the method of primed product comparisons in its analysis as to how users perceive and evaluate icons from different design eras. The main theoretical and methodological contribution is the analysis of visual usability and appeal as a cognitive process—and it sheds light on the partly unconscious process by which people find pictorial representations visually appealing and usable. The paper discusses the multi-dimensional nature of aesthetic appeal and the relationship between familiarity, novelty and aesthetic preferences. It also explores the implications of icon design styles on visual search and user interface design principles for creating visually usable and aesthetically pleasing interfaces. 

  1. Spiliotopoulos, K., Rigou, M., Sirmakessis, S., & Tsakalidis, A. (2018). A Comparative Study of Skeuomorphic and Flat Design from a UX Perspective. Multimodal Technologies and Interaction, 2(2), 31.  

This publication investigates how users perceive and experience the two dominant design approaches in user interface design—skeuomorphism and flat design—specifically at the level of icon design. The study examines icon recognizability, recall, effectiveness, as well as overall aesthetic appeal and perceived usability of the two design styles through a series of experiments and eye-tracking data. The main contribution is an analysis of the potential effects of the design approach on various usability metrics like task completion time, errors, as well as subjective assessments of usability and aesthetics. The paper aims to provide insights into the ongoing debate around skeuomorphic vs flat design—through empirically evaluating user perceptions and performance with each style. The findings have implications for designing visually usable and aesthetically appealing user interfaces. 

Answer a Short Quiz to Earn a Gift

Question 1

What is the main purpose of icons in user interfaces?

1 point towards your gift

Question 2

Why did the need for iconography become profound with the advent of home computing in the 1980s?

1 point towards your gift

Question 3

How do icons help save space in digital design?

1 point towards your gift

Question 4

What is a key principle in maintaining an effective icon set?

1 point towards your gift

Question 5

Why are icons considered to have universal appeal in digital communication?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on Iconography

Here’s the entire UX literature on Iconography by the Interaction Design Foundation, collated in one place:

Learn more about Iconography

Take a deep dive into Iconography with our course Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs. 

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use. 

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers. 

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All open-source articles on Iconography

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2024, June 18). What is Iconography?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
315,555 designers enjoy our newsletter—sure you don’t want to receive it?