components

Icon

Visually indicates an available action or option and helps users more easily understand common interaction patterns.
GitHub
Figma

Usage guidance

The main purpose of an Icon is to clarify the content by providing a visual cue and improve the scannability of the user interface. They can also help save screen real-estate in tight user interfaces. The Icon should never be used to replace a name of a product or feature. An Icon can frequently help enhance a Button's message or action.

Icons are available in five different sizes: xlarge, large, medium, small, and xsmall. In general though, the default size should be used.

On rare occasions there may be a need to use different sizes:

  • use xsmall or small together with smaller text sizes
  • use xlarge or large as standalone or decorative element
  • for use cases where a larger than available size is required, use one of the available Assets

An Icon is an image only, therefore by default it doesn't have any label or title and is hidden from assistive technologies, such as screen readers, by default. If a description for assistive technologies is necessary, use the aria-label attribute.

Regular Icons should primarily be used on light backgrounds, whereas solid Icons should typically be used on darker backgrounds. In addition to this, most Icons will inherit their color by default but can also be overwritten on the component level. The exception to this are Icons that have Colored in their names, such as GoogleColoredBrand.

Icon within a Button

An Icon can be used together with a Button, but it's important to note that an Icon is not a button outside of this and so direct interactions should be avoided.

When used within a Button, provide the Icon via the Button's icon, iconLeft or iconRight properties. In a similar fashion to this, it can also enhance the Link component.


Best practices

General


All available Icons

AddCircle
AddUser
AppleBrand
ApplePodcasts
Apply
Archive
ArrowDown
ArrowLeft
ArrowRight
ArrowUp
ArrowUpRight
Assess
Assignment
Attachment
Attention
Back
BarChart
Bell
Book
Bookmark
Branch
Briefcase
Building
Bulb
Bullet
Calendar
Camera
Chat
Checkmark
CheckmarkCircle
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
Circle
Clock
ClosedCaptions
Code
Cog
Columns
Command
Compass
CompiledSql
Copy
CreditCard
Cross
CrossCircle
Crosshair
DataCampBrand
DataCampCertificationBrand
DataCampJobsBrand
DataCampLearnBrand
DataCampRecruitBrand
DataCampWorkspaceBrand
Database
Desktop
Diamond
Document
Dollar
Download
Edit
Education
Environment
Exercise
Exit
Expand
ExternalLink
FacebookBrand
Feed
FigmaBrand
Filter
Flag
Flash
Flashcard
Float
Folder
Footer
Forbidden
Forward
FullScreen
GithubBrand
Globe
GoogleBrand
GoogleColoredBrand
GooglePlayBrand
GooglePodcasts
GooglePodcastsColored
Group
Header
Health
Heart
Help
HelpCircle
Hidden
Home
Image
InfoCircle
InstagramBrand
Integration
IntegrationPlug
Interface
Introduction
KaggleBrand
Keyboard
Lab
LanguageGlobe
LeanpubBrand
Learn
LineChart
Link
LinkedInBrand
List
Locked
Mail
Markdown
Matrix
Medal
Menu
Microphone
Minimize
Minus
Mobile
Moon
More
Multidoc
Mute
NineDots
Pause
PaypalBrand
PaypalColoredBrand
Phone
PieChart
Pin
PlatformSwitch
Play
Plus
Practice
Publish
PythonBrand
RBrand
Random
Redo
Refresh
Remove
Reply
RestrictedMode
Rewind
Rocket
Rows
Save
ScalaBrand
Schedule
Schema
Scissors
Search
Send
Share
Skip
SlackBrand
SlackColoredBrand
Sort
SortAscending
SortDescending
Sound
Sparkles
SpotifyBrand
Star
Stop
Sun
Tab
Tablet
Tag
Team
Terminal
Text
ThumbsDown
ThumbsUp
Trash
TrimBegin
TrimEnd
Trophy
TwitterBrand
Unarchive
Undo
Unlink
Unlocked
Upload
Upvote
User
Verified
VersionHistory
Video
VideoCamera
Visible
Waypoint
Website
YoutubeBrand
AddCircleSolid
ArchiveSolid
AssignmentSolid
AttentionSolid
BookmarkSolid
ChatSolid
CheckmarkCircleSolid
CircleSolid
ClockSolid
CogSolid
CrossCircleSolid
ExerciseSolid
FlashSolid
GroupSolid
HealthSolid
HeartSolid
HelpCircleSolid
HiddenSolid
InfoCircleSolid
LockedSolid
MicrophoneSolid
MoonSolid
MuteSolid
PinSolid
PlaySolid
RemoveSolid
RewindSolid
RocketSolid
SkipSolid
SoundSolid
SparklesSolid
StarSolid
StopSolid
SunSolid
TerminalSolid
TrashSolid
UnarchiveSolid
UnlockedSolid
UpvoteSolid
UserSolid
VerifiedSolid
VideoCameraSolid
VideoSolid
VisibleSolid

Examples

Sizes

In a Button

In a Link

Build data skills online on DataCamp and get ready for the future of work.


Props

Icon

In addition to the props listed below, Icon accepts all props from React.HTMLAttributes<SVGElement>.

NameTypeDescription
size
largemediumsmallxlargexsmall

Defines the size of the Icon. In general, use default size.

Default:

medium


Imports

You can import any existing Icon as a separate component. For example to import AddCircle Icon use:

import { AddCircle } from '@datacamp/waffles/icon';

Additionally, you can also import the following types from this module:

import type { IconProps } from '@datacamp/waffles/icon';