Icons

smartVISU uses two kinds of icons:

23
icons

1. 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.

{{ icon.arrow('id', 'item_switch', 'item_value', 'min', 'max', 'color') }}

Their properties change with two items:
- item_value controls the dynamic behavior of the icons
- item_switch should be left empty since clicking on the icon will toggle the related item

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.battery2

icon.blade

icon.blade2

icon.blade_z

icon.blade_arc

icon.cistern

icon.clock

icon.compass

icon.garagedoor

icon.graph

icon.heating

icon.light

icon.meter

icon.roofwindow

icon.shutter

icon.ventilation

icon.volume

icon.windmill

icon.windrose

icon.windsock

icon.zenith

Scaling Dynamic Icons

In dynamic icons, one property is depending on the item given in the parameter list. To scale the poperty of the icon to the value range of the item, the parameters min and max are used. Default values are 0 - 255.

{{ icon.shutter('icon3', '', 'bath.light.value', '', '', '') }}

				{{ icon.shutter('icon4', '', 'bath.light.value', '0', '510', '') }}

scaled 0-255

scaled 0-510

Coloring Dynamic Icons

Dynamic icons can be displayed in different colors. The color can be specified as hexadecimal value or - new in v3.3 with 6 icon classes 'icon0' through 'icon5'.

{{ icon.blade2('icon5', '', 'bath.light.value', '', '', '#f9a028') }}

				{{ icon.battery('icon6', '', 'bath.light.value', '', '', '#4176a9') }}

				{{ icon.meter('icon7', '', 'bath.light.value', '', '', 'icon4') }}

icon.blade2

icon.battery

icon.meter

900
icons

2. Static Icons

A static icon may be based on PNG or SVG image. PNG images are not styleable. They must be made available colorized and sorted in subfolders of ./icons by their colors (e.g. ./icons/or). SVG images get embedded into the html DOM by smartVISU and are then styleable using 6 classes of the configured design or with individual colors. While "icon0" and "icon1" are the classes for normal and highlighted SVG icons "{{ icon0 }}" and "{{ icon1 }}" serve as path variables for the icon files in normal and highlighted colors. All icons coming with smartVISU are SVG icons since SVGs are clearly preferred. However, legacy PNG icons are still supported.

As of v3.3 the loading of icons has changed to improve performance and stylability. It is recommended to use the widget "lib.svgimg" on svg icons in ./icons/ws or ./dropins/icons/ws with classes and styling options. This method is faster in loading and profits from the cache mechanism. For backward compatibility the img-tags will still receive long-term support.

normal:

{{ lib.svgimg('', 'light_light', 'icon0') }}

				<img class="icon" src="{{ icon0 }}light_light.svg" />

				<img class="icon" src="{{ icon0 }}light_light.png" />

highlighted:

{{ lib.svgimg('', 'light_light', 'icon1') }}

				{{ lib.svgimg('', 'light_light', '', 'fill:red; stroke:red;') }}

				<img class="icon icon1" src="{{ icon0 }}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.

DER_SPIEGEL.svg

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_next.svg

audio_pause.svg

audio_play.svg

audio_playlist.svg

audio_previous.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_sync.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_right.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_mkg_all.svg

control_building_flat_s_mkg_eg.svg

control_building_flat_s_mkg_kg.svg

control_building_flat_s_mkg_og.svg

control_building_flat_s_mkg.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_modern02_okg_all.svg

control_building_modern02_okg_dg.svg

control_building_modern02_okg_eg.svg

control_building_modern02_okg_int_all.svg

control_building_modern02_okg_int_dg.svg

control_building_modern02_okg_int_eg.svg

control_building_modern02_okg_int_og.svg

control_building_modern02_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_dots_hor_e.svg

control_dots_hor_f.svg

control_dots_hor_s.svg

control_dots_vert_e.svg

control_dots_vert_f.svg

control_dots_vert_s.svg

control_fault_current_circuit_breaker_off.svg

control_fault_current_circuit_breaker_on.svg

control_hamburger_e.svg

control_hamburger_f.svg

control_hamburger_s.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_relay_3_close.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_balcony.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_opener_key.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_motorbike.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_attention.svg

fts_shutter_automatic.svg

fts_shutter_down.svg

fts_shutter_jam.svg

fts_shutter_locked.svg

fts_shutter_manual.svg

fts_shutter_stop.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_closed.svg

fts_sunblind_volant.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_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

info_ack.svg

info_attention.svg

info_bug.svg

info_catastrophe.svg

info_error.svg

info_info.svg

info_no_state.svg

info_ok.svg

info_warning.svg

it_av_receiver.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_ups_attention.svg

it_ups_battery_empty.svg

it_ups_charging.svg

it_ups_on_battery.svg

it_ups_standby.svg

it_ups.svg

it_wifi_2.svg

it_wifi.svg

it_wireless_dcf77.svg

jquery_action.svg

jquery_alert.svg

jquery_arrow-d-l.svg

jquery_arrow-d-r.svg

jquery_arrow-d.svg

jquery_arrow-l.svg

jquery_arrow-r.svg

jquery_arrow-u-l.svg

jquery_arrow-u-r.svg

jquery_arrow-u.svg

jquery_audio.svg

jquery_back.svg

jquery_bars.svg

jquery_bullets.svg

jquery_calendar.svg

jquery_camera.svg

jquery_carat-d.svg

jquery_carat-l.svg

jquery_carat-r.svg

jquery_carat-u.svg

jquery_check.svg

jquery_clock.svg

jquery_cloud.svg

jquery_comment.svg

jquery_delete.svg

jquery_edit.svg

jquery_eye.svg

jquery_forbidden.svg

jquery_forward.svg

jquery_gear.svg

jquery_grid.svg

jquery_heart.svg

jquery_home.svg

jquery_info.svg

jquery_location.svg

jquery_lock.svg

jquery_mail.svg

jquery_minus.svg

jquery_navigation.svg

jquery_phone.svg

jquery_plus.svg

jquery_power.svg

jquery_recycle.svg

jquery_refresh.svg

jquery_search.svg

jquery_shop.svg

jquery_star.svg

jquery_tag.svg

jquery_user.svg

jquery_video.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_disco_ball_on.svg

light_disco_ball.svg

light_downlight.svg

light_dressing_room.svg

light_fairy_lights.svg

light_floor_lamp_2.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_showcase.svg

light_stairs.svg

light_standing_light.svg

light_starlit_sky.svg

light_table_lamp.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

logo_smarthomeNG.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_globe_lat.svg

measure_globe_long.svg

measure_globe.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_radioactivity.svg

measure_smart_meter.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_bug_filled.svg

message_bug.svg

message_caution.svg

message_empty.svg

message_error.svg

message_garbage_2.svg

message_garbage_3.svg

message_garbage_4.svg

message_garbage_collection.svg

message_garbage_recycling_sack.svg

message_garbage_sack.svg

message_garbage.svg

message_help.svg

message_info.svg

message_led.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_geo_active.svg

message_presence_geo_inactive.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

presence_distance.svg

presence_intensity.svg

presence_locked.svg

presence_shutoffdelay.svg

presence_unlocked.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.svg

sani_heating_temp.svg

sani_heating.svg

sani_irrigation_automatic.svg

sani_irrigation_manual.svg

sani_irrigation_pop_up_off.svg

sani_irrigation_pop_up_on.svg

sani_irrigation.svg

sani_jung_rtr_comfort.svg

sani_jung_rtr_night.svg

sani_jung_rtr_standby.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_towel_rad.svg

sani_valve_0.svg

sani_water_cold.svg

sani_water_hot.svg

sani_water_softening_unit.svg

sani_water_tap.svg

sani_wc_men.svg

sani_wc_women.svg

sani_well_pump.svg

scene_3d_printer.svg

scene_aquarium.svg

scene_baby.svg

scene_baking_oven.svg

scene_bath.svg

scene_bathroom.svg

scene_beer.svg

scene_birthday.svg

scene_bumper_car.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_dump_truck.svg

scene_firewood.svg

scene_fitness_2.svg

scene_fitness.svg

scene_flash.svg

scene_football.svg

scene_fountain_indoor.svg

scene_fountain.svg

scene_freezer.svg

scene_gaming_2.svg

scene_gaming_3.svg

scene_gaming.svg

scene_garden.svg

scene_gas_station.svg

scene_hall_alternat.svg

scene_hall.svg

scene_ironing.svg

scene_jukebox.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_multicooker.svg

scene_night.svg

scene_office.svg

scene_party.svg

scene_pet.svg

scene_plant.svg

scene_pool.svg

scene_power_grid.svg

scene_power_inverter.svg

scene_projector_closed_on_off.svg

scene_projector_closed.svg

scene_projector_open_on_off.svg

scene_projector_open.svg

scene_robo_lawnmower_active.svg

scene_robo_lawnmower_attention.svg

scene_robo_lawnmower_charging.svg

scene_robo_lawnmower_paused.svg

scene_robo_lawnmower.svg

scene_robo_vac_cleaner_active.svg

scene_robo_vac_cleaner_attention.svg

scene_robo_vac_cleaner_charging.svg

scene_robo_vac_cleaner_paused.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_solar_panel.svg

scene_stairs.svg

scene_storeroom.svg

scene_stove.svg

scene_summerhouse.svg

scene_swimming.svg

scene_teens_room.svg

scene_terrace.svg

scene_toilet_alternat.svg

scene_toilet.svg

scene_visit_guests.svg

scene_wallbox.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_fingerprint_reader.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_child_boy.svg

status_child_girl.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_man.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

status_woman.svg

temp_control.svg

temp_dew_point.svg

temp_frost.svg

temp_inside.svg

temp_outside.svg

temp_soil.svg

temp_temperature_calculated.svg

temp_temperature_max.svg

temp_temperature_min.svg

temp_temperature_setknob.svg

temp_temperature.svg

temp_windchill.svg

text_exclamation_mark.svg

text_max.svg

text_min.svg

text_na.svg

text_question_mark.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_sandglass.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_error.svg

vent_exhaust_air.svg

vent_humidifier.svg

vent_low_pressure_protection_unit.svg

vent_low_pressure_warning.svg

vent_stop.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_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_fog_heavy.svg

weather_fog.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_night_cloudy.svg

weather_night_fog.svg

weather_night_starry.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_generic.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

Icons

1. Dynamic Icons

Scaling Dynamic Icons

Coloring Dynamic Icons

2. Static Icons

normal:

highlighted:

Examples

Widgets

Basic

Calendar

Device

Multimedia

Phone

Plots

Status

Time/Clock

Weather

Custom

Design

Blocks

Buttons

Quad

Popups

Icons

Backgrounds

Misc

Fundamentals

Overview

Widget Assistant

Appliances