Icons

Icon Gallery.

This gallery shows all the icons that are available in the project. You can use them in your blocks by using the iconName property.

anthropicLogo

arrowDown

arrowLeft

arrowRight

arrowUpRight

barChartAscendingEv

barChartEv

binoculars

blend

blocks

bookOpenText

box

bubblesEv

cancel

chartPie

chartPieEv

chevronDown

chevronLeft

chevronRight

chevronsLeftRight

circle

circleBlocksEv

circleCheck

circleDot

circleDotEv

circleFillEv

circleHelp

circleInnerEv

circleSmall

circleX

circleXEv

circlesGroup3Ev

circlesIntersectionEv

columns3

compass

component

contrastEv

copy

copyMarkdownEv

diamond

distanceEv

dot

dotEv

download

draftingCompass

ellipsis

ellipsisVertical

evLogo

expand

eye

folder

gauge

gripEv

gripVertical

hexagon

homeEv

image

info

infoEv

layers

layout

layoutGrid

layoutPanelTop

lightbulb

link

list

listEv

listFilter

logOut

mapPin

maximize2

milestone

minimize2

minus

mousePointerEv

moveHorizontal

moveVertical

notFound

octagon

openAiLogo

package

paperclip

pentagon

plus

portraitUnderscoreEv

progressBarHorizontalEv

progressBarVerticalEv

radius

refreshCcw

rocket

rotateCw

rows3

searchEv

send

settings

share2

shield

shrink

sliceEv

sparkles

square

squareChevronDown

squareUnderscoreEv

star

sun

table

tag

target

terminal

text

textAlignCenter

toggleLeft

toggleRight

trash

trendingUp

triangle

trophy

underscoreEv

users

vizMode

wrench

External icons are icons that can be injected into the project. Each icon is represented by a unique id. You can use them in your blocks by using the template literal external:{id} as the icon name.

1 - Create a custom icons.tsx file in the app/components project folder.

2 - Follow this code example to add the icons you want to use to the file:

export function CustomIcons() {
  return (
    <>
    <SVGSymbol id="myCustomTriangle">
      <Centralize>
        <polygon points="0,-10 10,10 -10,10" />
      </Centralize>
    </SVGSymbol>
    <SVGSymbol id="myCustomSquare">
      <Centralize>
        <rect width="16" height="16" />
      </Centralize>
    </SVGSymbol>
    </>
  );
}

Make sure to use an id that is unique to the icon.

Always add the Centralize component to the icon to ensure it is centered.

3 - Reload the page to ensure the icons are loaded.

Check Lucide Icons for more icons.

Icons

Icon Gallery.

External Icons

On this page