Skip to content

Icons

Tessel comes with a set of commonly used icons. Show one with Icon and the icon’s name:

HStack(spacing: 6) {
Icon(.warning).color(.orange)
Text("3 problems")
}

An icon is sized by .font(size:) and colored by .color(…), just like text, so it lines up with the text next to it. See Icons, SVG and images for more, including drawing your own SVG.

The icons come from Lucide (ISC license), renamed to match Tessel’s naming style.

59 icons.

.file
.fileText
.fileCode
.filePlus
.folder
.folderOpen
.folderPlus
.plus
.minus
.close
.check
.trash
.pencil
.play
.stop
.save
.search
.chevronRight
.chevronDown
.chevronLeft
.chevronUp
.settings
.refresh
.warning
.info
.circleCheck
.circleX
.copy
.home
.user
.heart
.star
.arrowLeft
.arrowRight
.arrowUp
.arrowDown
.menu
.more
.sun
.moon
.download
.upload
.link
.externalLink
.calendar
.clock
.bell
.mail
.lock
.eye
.eyeOff
.terminal
.code
.bug
.package
.hammer
.undo
.redo
.image