Icons

smartVISU uses two kinds of icons:
18
icons

Dynamic Icons

Dynamic icons are based on svg-images. They are directly rendered in the browser and are the fastest way to show dynamic changes. Use the slider to see how the dynamic icon changes.
{{ icon.arrow('icon1', '', 'bath.light.value') }}
{{ icon.battery('icon2', '', 'bath.light.value') }}


icon.arrow
icon.battery
icon.blade
icon.blade2
icon.blade_arc
icon.blade_z
icon.clock
N
icon.compass
icon.graph
icon.light
icon.meter
icon.shutter
icon.ventilation
icon.volume
icon.windmill
N
icon.windrose
icon.windsock
icon.zenith


Coloring Dynamic Icons

Dynamic icons can be displayed in different colors. The color has to be specified as hexadecimal value. 'icon0' and 'icon1' can NOT be used!
{{ icon.blade2('icon3', '', 'bath.light.value', '', '', '#f9a028') }}
{{ icon.battery('icon4', '', 'bath.light.value', '', '', '#4176a9') }}
{{ icon.meter('icon5', '', 'bath.light.value', '', '', '#25ea4e') }}

icon.blade2
icon.battery
icon.meter




720
icons

Static Icons

A static icon may be based on .png-image or .svg-image. Use "icon0" to show the "normal" version. If you like to show the "highlighted" version .png and .svg differ. The .png based images need a completed directory (located in icons) with all icons rendered in the highlighted color. Highlighted .svg-images only need a style-sheet, defined in the design (located in design). Using .svg-images should be preferred.
normal:
<img class="icon" src="{{ icon0 }}light_light.svg" />
<img class="icon" src="{{ icon0 }}light_light.png" />
highlighted:
<img class="icon icon1" src="{{ icon }}light_light.svg" />
<img class="icon" src="{{ icon1 }}light_light.png" />
Examples
Icons located in "icons/ws/"
Important: These images are available as .svg-image only. By default smartVisu does not come with .png-images.
audio_audio.svg
audio_eject.svg
audio_eq.svg
audio_fade.svg
audio_ff.svg
audio_headphone.svg
audio_loudness.svg
audio_mic_mute.svg
audio_mic.svg
audio_pause.svg
audio_play.svg
audio_playlist.svg
audio_rec.svg
audio_repeat_song.svg
audio_repeat.svg
audio_rew.svg
audio_shuffle_album.svg
audio_shuffle.svg
audio_sound.svg
audio_stop.svg
audio_volume_high.svg
audio_volume_low.svg
audio_volume_mid.svg
audio_volume_mute.svg


control_1.svg
control_2.svg
control_3.svg
control_4.svg
control_all_on_off.svg
control_arrow_down_left.svg
control_arrow_down_right.svg
control_arrow_down.svg
control_arrow_downward.svg
control_arrow_left_right.svg
control_arrow_left.svg
control_arrow_leftward.svg
control_arrow_right.svg
control_arrow_rightward.svg
control_arrow_turn_left.svg
control_arrow_turn_right.svg
control_arrow_up_down.svg
control_arrow_up_left.svg
control_arrow_up_right.svg
control_arrow_up.svg
control_arrow_upward.svg
control_building_2_s_all.svg
control_building_2_s_dg.svg
control_building_2_s_eg.svg
control_building_2_s_int_all.svg
control_building_2_s_int_dg.svg
control_building_2_s_int_eg.svg
control_building_2_s_int_kg.svg
control_building_2_s_kg.svg
control_building_all.svg
control_building_control.svg
control_building_dg.svg
control_building_edg_all.svg
control_building_edg_dg.svg
control_building_edg_eg.svg
control_building_edg_int_all.svg
control_building_edg_int_dg.svg
control_building_edg_int_eg.svg
control_building_edg_int_kg.svg
control_building_edg_kg.svg
control_building_eg.svg
control_building_empty.svg
control_building_filled.svg
control_building_flat_filled.svg
control_building_flat_okg_all.svg
control_building_flat_okg_eg.svg
control_building_flat_okg_og.svg
control_building_flat_s_filled.svg
control_building_flat_s_okg_all.svg
control_building_flat_s_okg_eg.svg
control_building_flat_s_okg_og.svg
control_building_flat_s.svg
control_building_flat.svg
control_building_int_all.svg
control_building_int_dg.svg
control_building_int_eg.svg
control_building_int_kg.svg
control_building_int_og.svg
control_building_kg.svg
control_building_modern_s_2og_all.svg
control_building_modern_s_2og_dg.svg
control_building_modern_s_2og_eg.svg
control_building_modern_s_2og_int_all.svg
control_building_modern_s_2og_int_dg.svg
control_building_modern_s_2og_int_eg.svg
control_building_modern_s_2og_int_kg.svg
control_building_modern_s_2og_int_og1.svg
control_building_modern_s_2og_int_og2.svg
control_building_modern_s_2og_kg.svg
control_building_modern_s_2og_og1.svg
control_building_modern_s_2og_og2.svg
control_building_modern_s_all.svg
control_building_modern_s_dg.svg
control_building_modern_s_eg.svg
control_building_modern_s_int_all.svg
control_building_modern_s_int_dg.svg
control_building_modern_s_int_eg.svg
control_building_modern_s_int_kg.svg
control_building_modern_s_int_og.svg
control_building_modern_s_kg.svg
control_building_modern_s_og.svg
control_building_modern_s_okg_all.svg
control_building_modern_s_okg_dg.svg
control_building_modern_s_okg_eg.svg
control_building_modern_s_okg_int_all.svg
control_building_modern_s_okg_int_dg.svg
control_building_modern_s_okg_int_eg.svg
control_building_modern_s_okg_int_og.svg
control_building_modern_s_okg_og.svg
control_building_og.svg
control_building_outside.svg
control_building_s_all.svg
control_building_s_dg.svg
control_building_s_eg.svg
control_building_s_int_all.svg
control_building_s_int_dg.svg
control_building_s_int_eg.svg
control_building_s_int_kg.svg
control_building_s_int_og.svg
control_building_s_kg.svg
control_building_s_og.svg
control_building_s_okg_all.svg
control_building_s_okg_dg.svg
control_building_s_okg_eg.svg
control_building_s_okg_int_all.svg
control_building_s_okg_int_dg.svg
control_building_s_okg_int_eg.svg
control_building_s_okg_int_og.svg
control_building_s_okg_og.svg
control_cancel.svg
control_centr_arrow_down_left.svg
control_centr_arrow_down_right.svg
control_centr_arrow_down.svg
control_centr_arrow_left.svg
control_centr_arrow_right.svg
control_centr_arrow_up_left.svg
control_centr_arrow_up_right.svg
control_centr_arrow_up.svg
control_circuit_breaker_off.svg
control_circuit_breaker_on.svg
control_clear.svg
control_fault_current_circuit_breaker_off.svg
control_fault_current_circuit_breaker_on.svg
control_home.svg
control_minus.svg
control_ok.svg
control_on_off.svg
control_outside_on_off.svg
control_plus.svg
control_reboot.svg
control_reload.svg
control_reset.svg
control_return.svg
control_standby.svg
control_switch_1.svg
control_switch_3.svg
control_switch_m_4.svg
control_switch_m_8.svg
control_x.svg
control_zoom_in.svg
control_zoom_out.svg


edit_collapse.svg
edit_copy.svg
edit_cut.svg
edit_delete.svg
edit_expand.svg
edit_favorites.svg
edit_input_numeric.svg
edit_numeric_0.svg
edit_numeric_1.svg
edit_numeric_2.svg
edit_numeric_3.svg
edit_numeric_4.svg
edit_numeric_5.svg
edit_numeric_6.svg
edit_numeric_7.svg
edit_numeric_8.svg
edit_numeric_9.svg
edit_open.svg
edit_paste.svg
edit_save.svg
edit_settings.svg
edit_sort.svg


fts_awning.svg
fts_blade_arc_automatic.svg
fts_blade_arc_close_00.svg
fts_blade_arc_close_100.svg
fts_blade_arc_close_50.svg
fts_blade_arc_sun.svg
fts_blade_arc.svg
fts_blade_s_automatic.svg
fts_blade_s_sun.svg
fts_blade_s.svg
fts_blade_z_automatic.svg
fts_blade_z_sun.svg
fts_blade_z.svg
fts_door_locked.svg
fts_door_open.svg
fts_door_slide_2w_open_l.svg
fts_door_slide_2w_open_lr.svg
fts_door_slide_2w_open_r.svg
fts_door_slide_2w.svg
fts_door_slide_m.svg
fts_door_slide_open_m.svg
fts_door_slide_open.svg
fts_door_slide.svg
fts_door_tilt.svg
fts_door_unlocked.svg
fts_door.svg
fts_entrance_boom closed.svg
fts_entrance_boom open.svg
fts_frontdoor.svg
fts_garage_door_10.svg
fts_garage_door_100.svg
fts_garage_door_20.svg
fts_garage_door_30.svg
fts_garage_door_40.svg
fts_garage_door_50.svg
fts_garage_door_60.svg
fts_garage_door_70.svg
fts_garage_door_80.svg
fts_garage_door_90.svg
fts_garage.svg
fts_light_dome_open.svg
fts_light_dome.svg
fts_shutter_10.svg
fts_shutter_100.svg
fts_shutter_20.svg
fts_shutter_30.svg
fts_shutter_40.svg
fts_shutter_50.svg
fts_shutter_60.svg
fts_shutter_70.svg
fts_shutter_80.svg
fts_shutter_90.svg
fts_shutter_automatic.svg
fts_shutter_down.svg
fts_shutter_locked.svg
fts_shutter_manual.svg
fts_shutter_unlocked.svg
fts_shutter_up.svg
fts_shutter_vert_automatic.svg
fts_shutter_vert_down.svg
fts_shutter_vert_manual.svg
fts_shutter_vert_up.svg
fts_shutter_vert.svg
fts_shutter.svg
fts_sliding_gate_closed.svg
fts_sliding_gate_l_closed.svg
fts_sliding_gate_l_open.svg
fts_sliding_gate_l.svg
fts_sliding_gate_open.svg
fts_sliding_gate.svg
fts_sunblind.svg
fts_umbrella_offset_closed.svg
fts_umbrella_offset_open.svg
fts_window_1w_open.svg
fts_window_1w_tilt.svg
fts_window_1w.svg
fts_window_2w_open_l_tilt_r.svg
fts_window_2w_open_l.svg
fts_window_2w_open_lr.svg
fts_window_2w_open_r.svg
fts_window_2w_open.svg
fts_window_2w_tilt_l_open_r.svg
fts_window_2w_tilt_l.svg
fts_window_2w_tilt_lr.svg
fts_window_2w_tilt_r.svg
fts_window_2w_tilt.svg
fts_window_2w.svg
fts_window_louvre_open.svg
fts_window_louvre.svg
fts_window_roof _open_1.svg
fts_window_roof_open_1.svg
fts_window_roof_open_2.svg
fts_window_roof_shutter_10.svg
fts_window_roof_shutter_100.svg
fts_window_roof_shutter_20.svg
fts_window_roof_shutter_30.svg
fts_window_roof_shutter_40.svg
fts_window_roof_shutter_50.svg
fts_window_roof_shutter_60.svg
fts_window_roof_shutter_70.svg
fts_window_roof_shutter_80.svg
fts_window_roof_shutter_90.svg
fts_window_roof_shutter.svg
fts_window_roof.svg
fts_yard_gate_2w_open.svg
fts_yard_gate_2w.svg


it_camera.svg
it_fax.svg
it_internet.svg
it_nas.svg
it_net.svg
it_network.svg
it_pc.svg
it_radio.svg
it_remote.svg
it_router.svg
it_satellite_dish_heating.svg
it_satellite_dish.svg
it_server.svg
it_smartphone.svg
it_telephone.svg
it_television.svg
it_wifi.svg
it_wireless_dcf77.svg


light_ball.svg
light_bar_table.svg
light_bedside.svg
light_bollard_1.svg
light_bollard_2.svg
light_cabinet.svg
light_ceiling_infrared.svg
light_ceiling_light.svg
light_ceiling_spots.svg
light_control.svg
light_corridor.svg
light_cube.svg
light_diffused.svg
light_dinner_table.svg
light_downlight.svg
light_dressing_room.svg
light_fairy_lights.svg
light_floor_lamp.svg
light_fountain_indoor.svg
light_garage.svg
light_indoor_dg.svg
light_indoor_eg.svg
light_indoor_kg.svg
light_indoor_og_1.svg
light_indoor_og_2.svg
light_indoor_og.svg
light_indoor_ug.svg
light_indoor.svg
light_kitchen_hood.svg
light_led_stripe_rgb.svg
light_led_stripe.svg
light_led.svg
light_light_dim_00.svg
light_light_dim_10.svg
light_light_dim_100.svg
light_light_dim_20.svg
light_light_dim_30.svg
light_light_dim_40.svg
light_light_dim_50.svg
light_light_dim_60.svg
light_light_dim_70.svg
light_light_dim_80.svg
light_light_dim_90.svg
light_light.svg
light_mirror.svg
light_mirrored_wardrobe.svg
light_office_desk.svg
light_office.svg
light_outdoor.svg
light_painting.svg
light_party.svg
light_pendant_light_round.svg
light_pendant_light.svg
light_plant_spot.svg
light_plant.svg
light_pool_rgb.svg
light_pool.svg
light_rgb.svg
light_stairs.svg
light_standing_light.svg
light_starlit_sky.svg
light_television_backlight.svg
light_uplight.svg
light_wall_1.svg
light_wall_2.svg
light_wall_3.svg
light_waterfall.svg
light_window.svg
light_wire_system_1.svg
light_wire_system_2.svg
light_x-mas_candle_arch.svg
light_x-mas_manger.svg
light_x-mas_star_1.svg
light_x-mas_star_2.svg
light_x-mas_tree.svg


measure_battery_0.svg
measure_battery_100.svg
measure_battery_25.svg
measure_battery_50.svg
measure_battery_75.svg
measure_cistern_0.svg
measure_current.svg
measure_ph_value.svg
measure_photovoltaic_inst.svg
measure_pond_0.svg
measure_power_meter.svg
measure_power.svg
measure_pressure_bar.svg
measure_voltage.svg
measure_water_meter.svg
message_achtung.svg
message_attention_2.svg
message_attention.svg
message_bell_door_disabled.svg
message_bell_door.svg
message_bell.svg
message_caution.svg
message_empty.svg
message_error.svg
message_garbage_collection.svg
message_garbage.svg
message_help.svg
message_info.svg
message_light_barrier_open.svg
message_light_barrier.svg
message_light_intensity.svg
message_mail_open.svg
message_mail.svg
message_medicine.svg
message_notice.svg
message_ok.svg
message_postbox_mail.svg
message_postbox.svg
message_presence_active.svg
message_presence_disabled.svg
message_presence_inactive.svg
message_presence.svg
message_service.svg
message_socket_ch_3.svg
message_socket_ch_on_off.svg
message_socket_ch.svg
message_socket_on_off.svg
message_socket.svg
message_stop.svg
message_street_sweeper.svg
message_tendency_downward.svg
message_tendency_steady.svg
message_tendency_upward.svg


phone_answering.svg
phone_answersing.svg
phone_call_end_in.svg
phone_call_end_out.svg
phone_call_end.svg
phone_call_in.svg
phone_call_out.svg
phone_call.svg
phone_dial.svg
phone_missed_in.svg
phone_missed_out.svg
phone_remote_trans_disabled.svg
phone_ring_in.svg
phone_ring_out.svg
phone_ring.svg


sani_boiler_temp.svg
sani_buffer_temp_all.svg
sani_buffer_temp_down.svg
sani_buffer_temp_up.svg
sani_central_vacuum_cleaner_dust_cont.svg
sani_central_vacuum_cleaner_filter.svg
sani_central_vacuum_cleaner.svg
sani_cogeneration.svg
sani_cooling_automatic.svg
sani_cooling_manual.svg
sani_cooling_temp.svg
sani_cooling.svg
sani_domestic_waterworks.svg
sani_earth_source_heat_pump.svg
sani_floor_heating.svg
sani_garden_pump.svg
sani_heating_automatic.svg
sani_heating_manual Kopie.svg
sani_heating_manual.svg
sani_heating_temp Kopie.svg
sani_heating_temp.svg
sani_heating.svg
sani_irrigation_pop_up_off.svg
sani_irrigation_pop_up_on.svg
sani_irrigation.svg
sani_leakage.svg
sani_pool_filter_pump.svg
sani_pump.svg
sani_return_temp.svg
sani_solar_temp.svg
sani_solar.svg
sani_sprinkling.svg
sani_supply_temp.svg
sani_valve_0.svg
sani_water_cold.svg
sani_water_hot.svg
sani_water_softening_unit.svg
sani_water_tap.svg


scene_aquarium.svg
scene_baby.svg
scene_baking_oven.svg
scene_bath.svg
scene_bathroom.svg
scene_cat.svg
scene_childs_room.svg
scene_cinema.svg
scene_cleaning.svg
scene_clothes_dryer.svg
scene_cockle_stove.svg
scene_coffee_maker_automatic.svg
scene_cooking_alternat.svg
scene_cooking_hob.svg
scene_cooking.svg
scene_corridor.svg
scene_cubby.svg
scene_day.svg
scene_deckchair.svg
scene_dinner.svg
scene_dishwasher.svg
scene_dog.svg
scene_dressing_room_alternat.svg
scene_dressing_room.svg
scene_drink.svg
scene_fitness.svg
scene_football.svg
scene_fountain_indoor.svg
scene_fountain.svg
scene_freezer.svg
scene_gaming.svg
scene_garden.svg
scene_hall_alternat.svg
scene_hall.svg
scene_ironing.svg
scene_keyboard.svg
scene_kitchen_hood.svg
scene_kitchen_sink.svg
scene_laundry_room_fem.svg
scene_laundry_room.svg
scene_living.svg
scene_livingroom.svg
scene_making_love_clean.svg
scene_making_love.svg
scene_massage_jet.svg
scene_microwave_oven.svg
scene_night.svg
scene_office.svg
scene_party.svg
scene_pet.svg
scene_pool.svg
scene_projector_closed_on_off.svg
scene_projector_closed.svg
scene_projector_open_on_off.svg
scene_projector_open.svg
scene_robo_lawnmower.svg
scene_robo_vac_cleaner.svg
scene_sauna.svg
scene_scene_teach_in.svg
scene_scene.svg
scene_shower.svg
scene_sleeping_alternat.svg
scene_sleeping_twin_0_0.svg
scene_sleeping_twin_0_1.svg
scene_sleeping_twin_1_0.svg
scene_sleeping_twin_1_1.svg
scene_sleeping.svg
scene_stairs.svg
scene_storeroom.svg
scene_stove.svg
scene_summerhouse.svg
scene_swimming.svg
scene_terrace.svg
scene_toilet_alternat.svg
scene_toilet.svg
scene_visit_guests.svg
scene_washing_machine.svg
scene_waterfall.svg
scene_wine_cellar.svg
scene_workshop.svg
scene_x-mas.svg


secur_alarm_alarm.svg
secur_alarm_disabled.svg
secur_alarm_enabled.svg
secur_alarm_test.svg
secur_alarm.svg
secur_breakage_glass.svg
secur_burglary.svg
secur_encoding.svg
secur_frost_protection.svg
secur_heat_protection.svg
secur_locked.svg
secur_open.svg
secur_sabotage.svg
secur_smoke_detector.svg


status_automatic.svg
status_available.svg
status_away_1.svg
status_away_2.svg
status_comfort.svg
status_economy.svg
status_frost.svg
status_light_high.svg
status_light_low.svg
status_light_max.svg
status_light_off.svg
status_locked.svg
status_night.svg
status_not_available.svg
status_open.svg
status_presence_simulation_rec.svg
status_presence_simulation_run.svg
status_presence_simulation.svg
status_protection.svg
status_standby.svg
status_vacation.svg


temp_control.svg
temp_dew_point.svg
temp_frost.svg
temp_inside.svg
temp_outside.svg
temp_soil.svg
temp_temperature_max.svg
temp_temperature_min.svg
temp_temperature.svg
temp_windchill.svg
text_max.svg
text_min.svg


time_alarm_clock_alarm_off.svg
time_alarm_clock_alarm_on.svg
time_alarm_clock_snooze.svg
time_alarm_clock.svg
time_automatic.svg
time_calendar.svg
time_clock.svg
time_eco_mode.svg
time_graph.svg
time_manual_mode.svg
time_note.svg
time_statistic.svg
time_timer_switch.svg
time_timer.svg


user_available.svg
user_away.svg
user_ext_away.svg
user_n_a.svg


vent_air_filter_full.svg
vent_air_filter.svg
vent_ambient_air.svg
vent_bypass_open.svg
vent_bypass.svg
vent_exhaust_air.svg
vent_humidifier.svg
vent_low_pressure_protection_unit.svg
vent_low_pressure_warning.svg
vent_supply_air.svg
vent_used_air.svg
vent_ventilation_control.svg
vent_ventilation_level_0.svg
vent_ventilation_level_1.svg
vent_ventilation_level_2.svg
vent_ventilation_level_3.svg
vent_ventilation_level_automatic.svg
vent_ventilation_level_manual_m.svg
vent_ventilation.svg


weather_baraometric_pressure.svg
weather_barometric_pressure.svg
weather_cloudy_heavy.svg
weather_cloudy_light.svg
weather_cloudy.svg
weather_directions_n.svg
weather_directions_no.svg
weather_directions_nw.svg
weather_directions_o.svg
weather_directions_s.svg
weather_directions_so.svg
weather_directions_sw.svg
weather_directions_w.svg
weather_directions.svg
weather_frost.svg
weather_humidity_abs.svg
weather_humidity_rel.svg
weather_humidity_soil.svg
weather_humidity.svg
weather_light_meter.svg
weather_moon_phases_1_new.svg
weather_moon_phases_2.svg
weather_moon_phases_3_half.svg
weather_moon_phases_4.svg
weather_moon_phases_5_full.svg
weather_moon_phases_6.svg
weather_moon_phases_7_half.svg
weather_moon_phases_8.svg
weather_moonrise.svg
weather_moonset.svg
weather_pollen.svg
weather_rain_gauge.svg
weather_rain_heavy.svg
weather_rain_light.svg
weather_rain_meter.svg
weather_rain.svg
weather_sleet.svg
weather_snow_heavy.svg
weather_snow_ice_warning.svg
weather_snow_light.svg
weather_snow.svg
weather_station_quadra.svg
weather_station.svg
weather_storm.svg
weather_summer.svg
weather_sun.svg
weather_sunrise.svg
weather_sunset.svg
weather_thunderstorm.svg
weather_wind_directions_e.svg
weather_wind_directions_n.svg
weather_wind_directions_ne.svg
weather_wind_directions_nw.svg
weather_wind_directions_s.svg
weather_wind_directions_se.svg
weather_wind_directions_sw.svg
weather_wind_directions_w.svg
weather_wind_no_wind.svg
weather_wind_speed_bft.svg
weather_wind_speed_ms.svg
weather_wind_speed.svg
weather_wind.svg
weather_winter.svg

Widgets

Design

Misc