<?xml version="1.0" encoding="utf-8"?>
Uxcel
Pro MembershipFor TeamsHelp
Log inSign up

Icons Exercises

Explore hands-on “Icons” exercises to sharpen your skills and level up your craft. Want more? Browse all search results

Filled icons
Exercise

Filled icons

Icon Terminology
Conflicting icons
Exercise

Conflicting icons

Icon Terminology
Trailing icon
Exercise

Trailing icon

Intro to Icons in UI
Icon keylines
Exercise

Icon keylines

Icon Terminology
Icon paddings
Exercise

Icon paddings

Icon Terminology
Icon container
Exercise

Icon container

Icon Terminology
Ensure icons are easy to tap and click
Exercise

Ensure icons are easy to tap and click

Intro to Icons in UI
Hero image
Exercise

Hero image

Image Terminology
Visual designer
Exercise

Visual designer

Common Designer Roles
Leading icon
Exercise

Leading icon

Intro to Icons in UI
Illustration
Exercise

Illustration

Image Terminology
Duotone icons
Exercise

Duotone icons

Icon Terminology
Unique icons
Exercise

Unique icons

Icon Terminology
Ensure your icons scale correctly
Exercise

Ensure your icons scale correctly

Intro to Icons in UI
Avatar
Exercise

Avatar

Image Terminology
Icon border radius
Exercise

Icon border radius

Icon Terminology
Place icons in consistent containers
Exercise

Place icons in consistent containers

Intro to Icons in UI
Labels
Exercise

Labels

Anatomy of UI Components
Illustrator
Exercise

Illustrator

Common Designer Roles
Assets
Exercise

Assets

Image Types and Formats
Universal icons
Exercise

Universal icons

Icon Terminology
Outlined icons
Exercise

Outlined icons

Icon Terminology
Balance out icons visually
Exercise

Balance out icons visually

Intro to Icons in UI
Place icons on the left
Exercise

Place icons on the left

Best Practices for Designing UI Button Labels
SVG icons
Exercise

SVG icons

Icon Terminology
Accompany icons with labels
Exercise

Accompany icons with labels

Intro to Icons in UI
Colored icons
Exercise

Colored icons

Icon Terminology
Floating action button (FAB)
Exercise

Floating action button (FAB)

Common UI Button Styles
Icons should aid in user navigation
Exercise

Icons should aid in user navigation

Intro to Icons in UI
Icon grid
Exercise

Icon grid

Icon Terminology
Icons
Exercise

Icons

UI Design Elements
Icons
Exercise

Icons

Image Terminology
Logotype
Exercise

Logotype

Design in Marketing
Icons
Exercise

Icons

Anatomy of UI Components
Icon sets
Exercise

Icon sets

UI Design Deliverables
Center labels and icons inside a button
Exercise

Center labels and icons inside a button

Common UI Button Styles
Maintain icon consistency
Exercise

Maintain icon consistency

Intro to Icons in UI
Use consistent icons for the same purpose
Exercise

Use consistent icons for the same purpose

Intro to Icons in UI
Use a familiar position for a menu icon
Exercise

Use a familiar position for a menu icon

Best Practices for Designing UI Cards
Use consistent colors for your icons
Exercise

Use consistent colors for your icons

Intro to Icons in UI
Emojis
Exercise

Emojis

Image Terminology
Icons
Exercise

Icons

Image Types and Formats
Stick to simple icons
Exercise

Stick to simple icons

Intro to Icons in UI
Maintain color consistency
Exercise

Maintain color consistency

Best Practices for Designing UI Button Labels
Accompany icons with labels for more clarity
Exercise

Accompany icons with labels for more clarity

Best Practices for Designing UI Button Labels
Provide meaningful labels
Exercise

Provide meaningful labels

Help & Feedback
Align icons by their horizontal centers
Exercise

Align icons by their horizontal centers

Best Practices for Designing Lists
Make settings easy to find
Exercise

Make settings easy to find

Settings
Icon shape
Exercise

Icon shape

Intro to UI Selection Controls
Use appropriate tab icons
Exercise

Use appropriate tab icons

Intro to UI Tab Navigation