Skip to main content
2.0.0Next2.0.92.0.82.0.72.0.62.0.52.0.42.0.32.0.22.0.12.0.01.0.0
Version: 2.0.0

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.

alarm

analyse

area-chart

bar-chart

chart-area

chart-bar

chart-donut

chart-gauge

chart-line

chart-pie

chart-radar

chart-scatter

charts

config

donut

gauge

line-chart

pie-chart

radar-chart

run-analysis

scatter-plot

table

vessel-statistics

baseline

bus-switch

equipment-diagram

single-line-diagram

threshold

-nav-dots-vertical

Login

Logout

access

account-circle

add-picture

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

angle-swap-horizontal

angle-swap-vertical

announcement

app-store

application-1

application

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

battery-charging

bookmark

border-color

border-size

border-type

box

brightness

broadcast

calendar

cancel

caret-down

caret-left

caret-right

caret-up

chat-buble

check

chevron-down

chevron-left

chevron-right

chevron-up

chevron-wide-right

circle

clock

close

cloud-download-2

cloud-download

cloud-upload-2

cloud-upload

cloud

co2

cog

color-border

color-fill

color-text

compass

configuration

confirmation-number

container

copy

cut

dark

dashboard-editor

dashboard

day-dusk

day

db-cloud

db

device-hub

documents

dots-horizontal

dots-vertical

double-chevron-up

drag-item-1

drag-item

dusk

edit-redo

edit-undo

edit

emblem

expand

external-page

fast_forward

fast_rewind

feed

file

fill-color

filter-1

filter-2

fingerprint

flash

folder-outlined

folder

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

fullscreen-exit

fullscreen

group

group1

hamburger

hard-drive

help

home

indented-list

info-2

info

insert_chart_outlined

insert_photo

label

layers

light

line

load-more

lock-locked

lock-open

lock

logo-facebook

logo-linkedin

logo-twitter

mail

map

math-sum

minus

my-wells

night

notification-1

notification-2

notification

nox

object-list

on-off-switch

palette

papers

paste

pause

pencil

pending-actions

person

phone

pin

place

play

plus

preview

print

privacy

pull-down

pull-left

pull-right

pull-up

record

rectangle

redo

reload

reset

return-1

returns

router

scale

screen

share-1

share-2

show-password

signal

slash

spinner

star-empty

star

step_back

step_forward

stop

sucess

sum

support

template-configuration

template

tenants

test-this

text-color

text

trash

undo

update-timer-2

update-timer

vertical-align-bottom

vertical-align-top

view-list

visibility-off

visibility-on

warning-critical

zoom_in

zoom_out

draft

drop

engine-1

engine-2

engine-3

fleet

fuel-tank

propeller-1

propeller-2

propeller-tunnel

shaft-with-cog

shaft

underwater-radar

vessel-front

vessel-tank

vessel-top-outline

vessel-top

kongsberg

logo-kog-bw-full

logo-kog-bw

logo-kog-color-full

logo-kog-color

logo-kog-grey

logo-pnext

Dynamic-Position

Fuelpump

LARS

Seismic

TowCon

acknowledge

alert-list

co-2

conn

dp

eco-co2

eco-nox

eco-sox

energy-efficiency

energy-recovery

fresh-water

fuel-pump

fuel

list

lng-gass

machinery

noxx

posrefs

power

propulsion-1

propulsion-2

safety

sox

system

tank

vessel-front-2

icons

drilling-well-white

drilling-well

fishery-white

fishery

maritime-offshore-white

maritime-offshore

oil-gas-production-white

oil-gas-production

other-industries-white

other-industries

renewables-white

renewables

subsea-white

subsea

utilities-white

utilities

mixing

new-cargo

unload

voyage

voyages

cloud-and-moon

cloud-and-sun

currents-direction

currents

fog

force-1

force-10

force-11

force-12

force-2

force-3

force-4

force-5

force-6

force-7

force-8

force-9

moon

raining

snowflake

snowing

sun

sunset

temperature

thunder

waves-direction

waves

wind-direction

wind

loading

API

Properties

PropertyDescriptionTypeDefault
classesThe classes of the iconstring-
sizeSet the size of the componentbase body large medium small tiny xlarge xxlarge xxxlargedefaultOptions.baseSize
symbolThe string that determines the symbolalarm analyse area-chart bar-chart chart-area chart-bar chart-donut chart-gauge chart-line chart-pie chart-radar chart-scatter charts config donut gauge line-chart pie-chart radar-chart run-analysis scatter-plot table vessel-statistics baseline bus-switch equipment-diagram single-line-diagram threshold -nav-dots-vertical Login Logout access account-circle add-picture 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 angle-swap-horizontal angle-swap-vertical announcement app-store application-1 application 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 battery-charging bookmark border-color border-size border-type box brightness broadcast calendar cancel caret-down caret-left caret-right caret-up chat-buble check chevron-down chevron-left chevron-right chevron-up chevron-wide-right circle clock close cloud-download-2 cloud-download cloud-upload-2 cloud-upload cloud co2 cog color-border color-fill color-text compass configuration confirmation-number container copy cut dark dashboard-editor dashboard day-dusk day db-cloud db device-hub documents dots-horizontal dots-vertical double-chevron-up drag-item-1 drag-item dusk edit-redo edit-undo edit emblem expand external-page fast_forward fast_rewind feed file fill-color filter-1 filter-2 fingerprint flash folder-outlined folder 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 fullscreen-exit fullscreen group group1 hamburger hard-drive help home indented-list info-2 info insert_chart_outlined insert_photo label layers light line link-off link load-more lock-locked lock-open lock logo-facebook logo-linkedin logo-twitter mail map math-sum minus my-wells nav-apps-list nav-dots-horizontal navigation-arrow night notification-1 notification-2 notification nox object-list on-off-switch palette papers paste pause pencil pending-actions person phone pin place play plus preview print privacy pull-down pull-left pull-right pull-up record rectangle redo reload reset return-1 returns router scale screen search share-1 share-2 show-password signal slash spinner star-empty star step_back step_forward stop sucess sum support template-configuration template tenants test-this text-color text trash undo update-timer-2 update-timer vertical-align-bottom vertical-align-top view-list visibility-off visibility-on warning-critical zoom_in zoom_out draft drop engine-1 engine-2 engine-3 fleet fuel-tank propeller-1 propeller-2 propeller-tunnel shaft-with-cog shaft underwater-radar vessel-front vessel-tank vessel-top-outline vessel-top kongsberg logo-kog-bw-full logo-kog-bw logo-kog-color-full logo-kog-color logo-kog-grey logo-pnext Dynamic-Position Fuelpump LARS Seismic TowCon acknowledge alert-list co-2 conn dp eco-co2 eco-nox eco-sox energy-efficiency energy-recovery fresh-water fuel-pump fuel list lng-gass machinery navigation noxx posrefs power propulsion-1 propulsion-2 safety sox system tank vessel-front-2 icons drilling-well-white drilling-well fishery-white fishery maritime-offshore-white maritime-offshore oil-gas-production-white oil-gas-production other-industries-white other-industries renewables-white renewables subsea-white subsea utilities-white utilities mixing new-cargo unload voyage voyages cloud-and-moon cloud-and-sun currents-direction currents fog force-1 force-10 force-11 force-12 force-2 force-3 force-4 force-5 force-6 force-7 force-8 force-9 moon raining snowflake snowing sun sunset temperature thunder waves-direction waves wind-direction wind loading'circle'

Details

Used in