Waffles
© 2021 DataCamp, Inc.

components

Icons

Icons are used to visually communicate core parts of the product, available actions, and common interaction patterns that are available.

Overview

A package contains all the icons available within Waffles.

The main export of the package is a set of React components. These can be individually be imported:

import { AddCircleIcon } from '@datacamp/waffles-icons';

All these components accept the same set of properties:

  • size – The size in pixels to display the icon. The default is 18. Possible values: 12, 18, and 24.
  • color – The color of the icon. This defaults to currentColor, and so will match the surrounding text. If a custom color is required, then this prop can accept any valid CSS color. We recommend using the waffles-tokens to maintain a consistent visual experience.
  • className – Any extra className to pass to the root svg element. Can be used to apply any extra custom styling required.

For screen readers to be able to present the icons they all include a default title, however this should be overriden using the title prop if the icon is serving a specific purpose. If the icon is being used purely for decoration, and related text is sufficient, set the aria-hidden prop to true. This will prevent screen readers from announcing its presence.

Examples

Regular

Add

Customized

Add

All Available Icons

AddAddCircleIcon
AddAddCircleInvertedIcon
AppleAppleBrandIcon
ApplyApplyIcon
ArchiveArchiveIcon
Down ArrowArrowDownIcon
Left ArrowArrowLeftIcon
Right ArrowArrowRightIcon
Up ArrowArrowUpIcon
AssessAssessIcon
AssignmentAssignmentIcon
AssignmentAssignmentInvertedIcon
AttachmentAttachmentIcon
AttentionAttentionCircleIcon
AttentionAttentionCircleInvertedIcon
BackBackIcon
Bar ChartBarChartIcon
BellBellIcon
BookBookIcon
BookmarkBookmarkIcon
BookmarkBookmarkInvertedIcon
BranchBranchIcon
BriefcaseBriefcaseIcon
BuildingBuildingIcon
BulbBulbIcon
BulletBulletIcon
ChatChatIcon
ChatChatInvertedIcon
CheckmarkCheckmarkIcon
CheckmarkCheckmarkCircleIcon
CheckmarkCheckmarkCircleInvertedIcon
Down ChevronChevronDownIcon
Left ChevronChevronLeftIcon
Chevron RightChevronRightIcon
Chevron UpChevronUpIcon
CircleCircleIcon
CircleCircleInvertedIcon
ClockClockIcon
ClockClockInvertedIcon
CodeCodeIcon
CogCogIcon
CogCogInvertedIcon
ColumnsColumnsIcon
CommandCommandIcon
CompassCompassIcon
CopyCopyIcon
Credit CardCreditCardIcon
CrossCrossIcon
CircleCrossCircleIcon
CrossCrossCircleInvertedIcon
CrosshairCrosshairIcon
DatabaseDatabaseIcon
DataCampDatacampBrandIcon
DesktopDesktopIcon
DocumentDocumentIcon
DollarDollarIcon
DownloadDownloadIcon
EditEditIcon
EducationEducationIcon
ExerciseExerciseIcon
ExerciseExerciseInvertedIcon
ExitExitIcon
ExpandExpandIcon
External LinkExternalLinkIcon
FacebookFacebookBrandIcon
FacebookFacebookRoundBrandIcon
FacebookFacebookSquareBrandIcon
FeedFeedIcon
FilterFilterIcon
FlagFlagIcon
FloatFloatIcon
FolderFolderIcon
FooterFooterIcon
ForbiddenForbiddenIcon
ForwardForwardIcon
Full ScreenFullScreenIcon
GitHubGithubBrandIcon
GlobeGlobeIcon
GoogleGoogleBrandIcon
GoogleGoogleColoredBrandIcon
Google PlayGooglePlayBrandIcon
Google PlusGooglePlusSquareBrandIcon
GroupGroupIcon
GroupGroupInvertedIcon
HeaderHeaderIcon
HealthHealthIcon
HealthHealthInvertedIcon
HeartHeartIcon
HeartHeartInvertedIcon
HelpHelpIcon
HelpHelpCircleIcon
HelpHelpCircleInvertedIcon
HiddenHiddenIcon
HiddenHiddenInvertedIcon
HomeHomeIcon
Info CircleInfoCircleIcon
Info CircleInfoCircleInvertedIcon
InstagramInstagramBrandIcon
InterfaceInterfaceIcon
IntroductionIntroductionIcon
LabLabIcon
LeanpubLeanpubBrandIcon
LearnLearnIcon
Line ChartLineChartIcon
LinkLinkIcon
LinkedInLinkedinBrandIcon
LinkedInLinkedinSquareBrandIcon
ListListIcon
LockedLockedIcon
LockedLockedInvertedIcon
MailMailIcon
MarkdownMarkdownIcon
MatrixMatrixIcon
MedalMedalIcon
MenuMenuIcon
MicrophoneMicrophoneIcon
MicrophoneMicrophoneInvertedIcon
MobileMobileIcon
MoonMoonIcon
MoonMoonInvertedIcon
MoreMoreIcon
MuteMuteIcon
MuteMuteInvertedIcon
Nine DotsNineDotsIcon
PausePauseIcon
PayPalPaypalBrandIcon
PhonePhoneIcon
Pie ChartPieChartIcon
PinPinIcon
PinPinInvertedIcon
Platform SwitchPlatformSwitchIcon
PlayPlayIcon
PlayPlayInvertedIcon
PracticePracticeIcon
PythonPythonBrandIcon
RRBrandIcon
RandomRandomIcon
RedoRedoIcon
RemoveRemoveIcon
RemoveRemoveInvertedIcon
ReplyReplyIcon
RewindRewindIcon
RewindRewindInvertedIcon
RocketRocketIcon
RowsRowsIcon
SaveSaveIcon
ScalaScalaBrandIcon
SearchSearchIcon
ShareShareIcon
SkipSkipIcon
SkipSkipInvertedIcon
SlackSlackBrandIcon
SlackSlackColoredBrandIcon
SoundSoundIcon
SoundSoundInvertedIcon
SparklesSparklesIcon
SparklesSparklesInvertedIcon
StarStarIcon
StarStarInvertedIcon
StopStopIcon
StopStopInvertedIcon
SunSunIcon
SunSunInvertedIcon
TabTabIcon
TagTagIcon
TeamTeamIcon
TerminalTerminalIcon
TerminalTerminalInvertedIcon
TextTextIcon
TrashTrashIcon
TrashTrashInvertedIcon
Trim BeginningTrimBeginIcon
Trim EndTrimEndIcon
TrophyTrophyIcon
TwitterTwitterBrandIcon
UndoUndoIcon
UnlockedUnlockedIcon
UnlockedUnlockedInvertedIcon
UploadUploadIcon
UserUserIcon
UserUserInvertedIcon
VideoVideoIcon
Video CameraVideoCameraIcon
Video CameraVideoCameraInvertedIcon
VideoVideoInvertedIcon
VisibleVisibleIcon
VisibleVisibleInvertedIcon
WaypointWaypointIcon
YouTubeYoutubeBrandIcon

React Native

There are also react-native versions of all these icons. These can be used the same way as on web, the only difference being that instead of className, the style prop can be used to add custom styling. These components can be imported in the same way. When in a react-native environment, this will resolve to the correct version.

import { AddCircleIcon } from '@datacamp/waffles-icons';

Sprites

For those that cannot use react components, there are also svg sprites available in the waffles-icons package. There are five different formats available at the file paths listed below. Check the detailed overview of the differences between these different sprites. Feel free to use whichever makes most sense for your use case.

  • @datacamp/waffles-icons/sprites/css/svg/sprite.css-bde2e71c.svg
  • @datacamp/waffles-icons/sprites/defs/svg/sprite.defs.svg
  • @datacamp/waffles-icons/sprites/stack/svg/sprite.stack.svg
  • @datacamp/waffles-icons/sprites/symbol/svg/sprite.symbol.svg
  • @datacamp/waffles-icons/sprites/view/svg/sprite.view-f796bea8.svg