Icon

The Icon component allows you to render various icons with customizable properties such as size, color theme, and name.

Usage

import { Icon } from '@harnessio/ui/components'

//...

return <Icon name="double-tick" size={48} />

Available Icons

The following icons are available:

chevron-down

chevron-right

chevron-up

chevron-up-down

filter-list

info-circle

double-tick

language

play

download

clock

checkbox

harness

pipelines

pipelines-gradient

ellipsis

repositories

repositories-gradient

environment

secrets

connectors

star

star-filled

pull

arrow-long

success

fail

fail-legacy

tube-sign

signpost

merged

pr-draft

comments

tasks

tick

no-data-folder

no-data-folder-light

no-repository

no-repository-light

no-data-merge

no-data-merge-light

no-data-cog

no-data-cog-light

no-data-branches

no-data-branches-light

no-search-magnifying-glass

no-search-magnifying-glass-light

no-data-members

no-data-members-light

no-data-error

no-data-error-light

no-data-pr

no-data-pr-light

no-data-tags

changes

checks

vertical-ellipsis

clone

triangle-warning

pending-clock

circle

apple-shortcut

edit-pen

gitness-logo

github-actions

folder

file

tag

branch

open-pr

plus

running

circle-arrow-top-right

box-lightning

box-cloning

box-pull-requests

box-guide

node-logo

python-logo

python-and-node-logo

ai-sparks

sparks

sparks-gradient

sparks-gradient-dark

sparks-gradient-light

pr-open

pr-review

pr-closed

pr-merge

git-branch

pr-comment

create-workspace

create-workspace-light

no-data-webhooks

no-data-webhooks-light

add-folder

add-file

lightning

harness-plugin

bitrise-plugin

trash

x-mark

cog-6

unpin

rocket

plug

shield-lock

pr-merged

run

run-test

ssh-key

dot

tick-circle

cancel-grey

harness-logo-text

account

settings-1

settings-2

harness-gradient

harness-gradient-ellipse

sub-menu-ellipse

notification

wrench

hierarchy

key

file-icon

sidebar-icon

sidebar-left

sidebar-right

sidebar-mobile

variable

clock-icon

eye

stack

bookmark-icon

webhook

user

users

account-icon

folder-icon

briefcase

shield

snow

ticket

grid-dots

circle-arrow-top

circle-arrows-updown

chevron-fill-down

more-dots-fill

execution

execution-gradient

paint

navigation

logOut

database-gradient

database

artifacts-gradient

artifacts

infrastructure-gradient

infrastructure

flag-gradient

flag

dev-portal-gradient

dev-portal

dev-envs-gradient

dev-envs

dev-insights-gradient

dev-insights

security-tests-gradient

security-tests

supply-chain-gradient

supply-chain

cloud-costs-gradient

cloud-costs

incidents-gradient

incidents

chaos-engineering-gradient

chaos-engineering

dashboards-gradient

dashboards

menu-dots

bookmark-add

upload

minus

header

bold

attachment

code

list

checklist

italicize

no-data-commits

no-data-commits-light

compare

lock

cross

collapse-diff

expand-diff

circle-plus

code-brackets

attachment-image

collapse-comment

expand-comment

suggestion

repo-icon

arrow

arrow-left

arrow-short

bold-plus

checkbox-circle

circle-with-sector

command-symbol

cross-circle

warning-triangle-outline

slack

docker

stop

collapse-out

collapse-in

square-dashed

refresh

node-icon

golang-icon

attachment-link

API Reference

The Icon component can be sized either using the size prop or the height and width props. The size prop can be used as a shorthand to set both height and width. Some icons have specific alternatives that can be used in light and dark modes; setting the themeDependent prop will opt into switching between the light and dark versions of the icon.

<Icon
  name="double-tick"   // name of the icon
  size={16}            // [OPTIONAL] size of the icon in pixels
  height={16}          // [OPTIONAL] height of the icon in pixels
  width={16}           // [OPTIONAL] width of the icon in pixels
  themeDependent       // [OPTIONAL] if true, a light version of the icon will be used if available
  className="my-class" // [OPTIONAL] custom class name
/>

Prop	Required	Default	Type
name	true		string
size	false	16	number
height	false		number
width	false		number
themeDependent	false	false	boolean
className	false		string