Icon
Icons are a staple of modern web development. They offer users a symbolic image to help them recognize features and interperate the UI.
Below is a list of icons, each with a corresponding name tag. Select which Icon to display by passing the name to the symbol property of the TritonIcon.
Basic Usage
<triton-icon symbol="cog"></triton-icon>
<TritonIcon symbol="cog"/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-icon symbol="cog"></triton-icon>
</body>
</html>
Icons
Here is a list of all the icons currently avalible in Triton.
Dynamic-Position
Fuelpump
LARS
Login
Logout
Seismic
TowCon
access
account-circle
acknowledge
add-picture
alarm
alert-list
align-arrow-middle
align-bottom
align-horizontal
align-justify
align-left
align-right
align-text-center
align-text-left
align-text-right
align-top
align-vertical
allign-right
allign-vertical
analyse
angle-swap-horizontal
angle-swap-vertical
announcement
app-store
application
application-1
apps-list
area
arrow-align-middle
arrow-back
arrow-down
arrow-forward
arrow-head
arrow-left
arrow-right
arrow-up
arrow_drop_down
arrow_drop_up
attachment
average
baseline
battery-charging
bookmark
border-color
border-size
border-type
box
brightness
broadcast
bus-switch
calendar
cancel
caret-down
caret-left
caret-right
caret-up
chart-area
chart-bar
chart-donut
chart-gauge
chart-line
chart-pie
chart-radar
chart-scatter
charts
chat-buble
check
chevron-down
chevron-left
chevron-right
chevron-up
chevron-wide-right
circle
clock
clock-fill
close
cloud
cloud-and-moon
cloud-and-sun
cloud-download
cloud-download-2
cloud-upload
cloud-upload-2
co-2
co2
cog
color-border
color-fill
color-picker
color-text
compass
config
configuration
confirmation-number
conn
container
copy
currents
currents-direction
cut
dark
dashboard
dashboard-editor
day
day-dusk
db
db-cloud
device-hub
documents
donut
dots-horizontal
dots-vertical
double-chevron-up
dp
draft
drag-item
drag-item-1
drop
dusk
eco-co2
eco-nox
eco-sox
edit
edit-redo
edit-undo
emblem
energy-efficiency
energy-recovery
engine-1
engine-2
engine-3
equipment-diagram
expand
external-page
fast_forward
fast_rewind
feed
file
fill-color
filter-1
filter-2
fingerprint
flash
fleet
fog
folder
folder-outlined
force-1
force-10
force-11
force-12
force-2
force-3
force-4
force-5
force-6
force-7
force-8
force-9
format-itallic
format-remove
format-underline
format_align_center
format_align_justify
format_align_left
format_align_right
format_bold
format_clear
format_indent_decrease
format_indent_increase
format_italic
format_list_bulleted
format_list_numbered
format_strikethrough
format_underlined
frame
fresh-water
fuel
fuel-pump
fuel-tank
fullscreen
fullscreen-exit
gauge
group
group1
hamburger
hard-drive
help
help-2
home
inactive
indented-list
info
info-2
insert_chart_outlined
insert_photo
label
layers
light
line
link
link-off
list
lng-gass
load-more
loading
lock
lock-locked
lock-open
logo-facebook
logo-kongsberg
logo-kongsberg-fill
logo-linkedin
logo-pnext
logo-triton
logo-twitter
machinery
map
master-track
math-sum
minus
mixing
moon
my-wells
new-cargo
night
notification
notification-2
nox
noxx
object-list
on-off-switch
operation-tree
palette
papers
paste
pause
pencil
pending-actions
person
phone
pin
place
play
plus
posrefs
power
preview
privacy
propeller-1
propeller-2
propeller-tunnel
propulsion-1
propulsion-2
pull-down
pull-left
pull-right
pull-up
raining
record
rectangle
redo
reload
reset
reset-zoom
return-1
returns
router
run-analysis
safety
save
scale
screen
search
sensor-bar
shaft
shaft-with-cog
show-password
signal
single-line-diagram
slash
snowflake
snowing
sox
spinner
star
star-empty
step_back
step_forward
stop
sucess
sum
sun
sunset
support
system
table
tank
temperature
template
template-configuration
tenants
terminal
test-this
text
text-color
threshold
thunder
trash
underwater-radar
undo
unload
update-timer
update-timer-2
vertical-align-bottom
vertical-align-top
vessel-front
vessel-front-2
vessel-statistics
vessel-tank
vessel-top
vessel-top-outline
view-list
visibility-off
visibility-on
voyage
voyages
warning-critical
waves
waves-direction
wind
wind-direction
zoom_in
zoom_out
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
classes | The classes of the icon | string | - |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
symbol | The string that determines the symbol | -nav-dots-vertical Dynamic-Position Fuelpump LARS Login Logout Seismic TowCon access account-circle acknowledge add-picture alarm alert-list align-arrow-middle align-bottom align-horizontal align-justify align-left align-right align-text-center align-text-left align-text-right align-top align-vertical allign-right allign-vertical analyse angle-swap-horizontal angle-swap-vertical announcement app-store application application-1 apps-list area arrow-align-middle arrow-back arrow-down arrow-forward arrow-head arrow-left arrow-right arrow-up arrow_drop_down arrow_drop_up attachment average baseline battery-charging bookmark border-color border-size border-type box brightness broadcast bus-switch calendar cancel caret-down caret-left caret-right caret-up chart-area chart-bar chart-donut chart-gauge chart-line chart-pie chart-radar chart-scatter charts chat-buble check chevron-down chevron-left chevron-right chevron-up chevron-wide-right circle clock clock-fill close cloud cloud-and-moon cloud-and-sun cloud-download cloud-download-2 cloud-upload cloud-upload-2 co-2 co2 cog color-border color-fill color-picker color-text compass config configuration confirmation-number conn container copy currents currents-direction cut dark dashboard dashboard-editor day day-dusk db db-cloud device-hub documents donut dots-horizontal dots-vertical double-chevron-up dp draft drag-item drag-item-1 drop dusk eco-co2 eco-nox eco-sox edit edit-redo edit-undo emblem energy-efficiency energy-recovery engine-1 engine-2 engine-3 equipment-diagram expand external-page fast_forward fast_rewind feed file fill-color filter-1 filter-2 fingerprint flash fleet fog folder folder-outlined force-1 force-10 force-11 force-12 force-2 force-3 force-4 force-5 force-6 force-7 force-8 force-9 format-itallic format-remove format-underline format_align_center format_align_justify format_align_left format_align_right format_bold format_clear format_indent_decrease format_indent_increase format_italic format_list_bulleted format_list_numbered format_strikethrough format_underlined frame fresh-water fuel fuel-pump fuel-tank fullscreen fullscreen-exit gauge group group1 hamburger hard-drive help help-2 home inactive indented-list info info-2 insert_chart_outlined insert_photo label layers light line link link-off list lng-gass load-more loading lock lock-locked lock-open logo-facebook logo-kongsberg logo-kongsberg-fill logo-linkedin logo-pnext logo-triton logo-twitter machinery mail map master-track math-sum minus mixing moon my-wells nav-apps-list nav-dots-horizontal navigation navigation-arrow new-cargo night notification notification-2 nox noxx object-list on-off-switch operation-tree palette papers paste pause pencil pending-actions person phone pin place play plus posrefs power preview print privacy propeller-1 propeller-2 propeller-tunnel propulsion-1 propulsion-2 pull-down pull-left pull-right pull-up raining record rectangle redo reload reset reset-zoom return-1 returns router run-analysis safety save scale screen search sensor-bar shaft shaft-with-cog share-1 share-2 show-password signal single-line-diagram slash snowflake snowing sox spinner star star-empty step_back step_forward stop sucess sum sun sunset support system table tank temperature template template-configuration tenants terminal test-this text text-color threshold thunder trash underwater-radar undo unload update-timer update-timer-2 vertical-align-bottom vertical-align-top vessel-front vessel-front-2 vessel-statistics vessel-tank vessel-top vessel-top-outline view-list visibility-off visibility-on voyage voyages warning-critical waves waves-direction wind wind-direction zoom_in zoom_out | 'circle' |