Icon

Chakra provides a set of commonly used interface icons you can use in your project

    View Source@chakra-ui/icon

Installation#

Chakra provides a set of commonly used interface icons you can use them in your project.

These icons are published into a separate package that is not part of @fluidtruck/core by default.

npm i @chakra-ui/icons

Usage#

Chakra provides multiple ways to use icons in your project:

🚨 Avoid passing onClick handlers to icon components. If you need a clickable icon, use the IconButton instead.

import { PhoneIcon, AddIcon, WarningIcon } from '@fluidtruck/icons'


// The default icon size is 1em (16px)
<PhoneIcon />


// Use the `boxSize` prop to change the icon size
<PlusIcon boxSize={6} />


// Use the `color` prop to change the icon color
<WarningIcon w={8} h={8} color="red.500" />

All icons#

Below is a list of all of the icons in the library, along with the corresponding component names:

Search Icons...

AppleIcon

AppStoreIcon

ArrowDownIcon

ArrowLeftIcon

ArrowRightIcon

ArrowUpIcon

AvatarIcon

BankIcon

BellIcon

BookIcon

BulletIcon

BusinessIcon

CalendarIcon

CardAddIcon

CardAmexIcon

CardDiscoverIcon

CardGenericIcon

CardMastercardIcon

CardPOIcon

CardVisaIcon

CaretDownIcon

CaretUpIcon

CargoVanIcon

CheckIcon

CheckOutlineIcon

ChevronLeftIcon

ChevronRightIcon

ChevronUpIcon

ChevronDownIcon

CircleCheckIcon

CircleArrowIcon

CircleFalseIcon

CircleIcon

ClaimsIcon

ClockIcon

CloseIcon

CompanyIcon

ConstructionCones

CreditCardIcon

CurrentLocationIcon

DeliveryBoxIcon

DocumentIcon

DocumentsIcon

DownloadIcon

DownVehicleIcon

DriverCupIcon

DriverMgmtIcon

EditIcon

EllipsisIcon

EnvelopeIcon

EVBadgeIcon

ExclamationCircleIcon

ExclamationIcon

ExclamationOutlineIcon

ExclamationTriangleIcon

EyeIcon

EyeSlashIcon

FacebookIcon

FilterIcon

FinishRouteIcon

FlatTireIcon

FleetIcon

GasPumpIcon

GeofenceIcon

GlobeIcon

GoogleIcon

GoogleStoreIcon

HeartEmptyIcon

HeartFullIcon

HelpIcon

HomeIcon

InfoIcon

InstagramIcon

InstantBookIcon

LayersIcon

LeaderCupIcon

LicenseBackIcon

LicenseFrontIcon

LicenseSelfieIcon

LinkedInIcon

ListIcon

LocationIcon

LockIcon

MaintenanceIcon

MapIcon

MapPinCheckIcon

MapPinEVIcon

MapPinIcon

MaximizeIcon

MenuIcon

MessageIcon

MinimizeIcon

MinusCircleIcon

PaymentIcon

PencilIcon

PerformanceIcon

PhoneIcon

PlusCircleIcon

PlusIcon

ReceiptIcon

RingIcon

RoutingTruckCircle

SaveIcon

SearchIcon

SettingsIcon

ShareArrowIcon

ShareIcon

SignOutIcon

StarIcon

StartRouteIcon

SteeringWheelIcon

TargetIcon

TeamAddIcon

TeamIcon

TrafficIcon

TwitterIcon

UnlockIcon

UploadIcon

UserIcon

Using a third-party icon library#

To use third-party icon libraries like react-icons, here are the steps:

  1. Import the Icon component from @fluidtruck/core
  2. Pass the desired third party icon into the as prop
// 1. Import
import { Icon } from '@fluidtruck/core'
import { MdSettings } from 'react-icons/md'


// 2. Use the `as` prop
function Example() {
  return <Icon as={MdSettings} />
}

Some examples#

<HStack>
  {/* The default icon size is 1em (16px) */}
  <Icon as={MdSettings} />


  {/* Use the `boxSize` prop to change the icon size */}
  <Icon as={MdReceipt} boxSize={6} />


  {/* Use the `color` prop to change the icon color */}
  <Icon as={MdGroupWork} w={8} h={8} color='red.500' />
</HStack>

Creating your custom icons#

Chakra provides two methods for creating your custom icons:

They can be imported from @fluidtruck/core:

import { Icon, createIcon } from '@fluidtruck/core'

Both Icon and createIcon enable you to style the icon using style props.

Using the Icon component#

The Icon component renders as an svg element.

<Icon viewBox='0 0 200 200' color='red.500'>
  <path
    fill='currentColor'
    d='M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0'
  />
</Icon>

This enables you to define your own custom icon components:

const CircleIcon = (props) => (
  <Icon viewBox='0 0 200 200' {...props}>
    <path
      fill='currentColor'
      d='M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0'
    />
  </Icon>
)

And style them with style props:

<HStack>
  {/* The default icon size is 1em (16px) */}
  <CircleIcon />


  {/* Use the `boxSize` prop to change the icon size */}
  <CircleIcon boxSize={6} />


  {/* Use the `color` prop to change the icon color */}
  <CircleIcon boxSize={8} color='red.500' />
</HStack>

Using the createIcon function#

The createIcon function is a convenience wrapper around the process of generating icons with Icon, allowing you to achieve the same functionality with less effort.

import { createIcon } from '@fluidtruck/core'


// using `path`
export const UpDownIcon = createIcon({
  displayName: 'UpDownIcon',
  viewBox: '0 0 200 200',
  // path can also be an array of elements, if you have multiple paths, lines, shapes, etc.
  path: (
    <path
      fill='currentColor'
      d='M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0'
    />
  ),
})


// OR using the `d` value of a path (the path definition) directly
export const UpDownIcon = createIcon({
  displayName: 'UpDownIcon',
  viewBox: '0 0 200 200',
  d: 'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
})

Tips for generating your own icons#

  • Export icons as svg from Figma, Sketch, etc.
  • Use a tool like SvgOmg to reduce the size and minify the markup.

Fallback Icon#

When children is not provided, the Icon component renders a fallback icon.

<Icon />