[GH-ISSUE #809] vlc tray icon not respecting `icon_size`

JakeStanger commented

2026-05-23 02:53:23 +01:00

Owner

Originally created by @salahoued on GitHub (Dec 9, 2024).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/809

Describe the bug

A clear and concise description of what the bug is.

I'm not sure if this is an ironbar issue or a vlc one, but when vlc (flatpak) is launched, its tray icon is shown in ironbar too big which causes the bar height to grow big

To Reproduce
Steps to reproduce the behavior:

open vlc
observe the tray icon

Expected behavior

A clear and concise description of what you expected to happen.

tray icons should respect the icon_size option in the config, or if not declared should respect the bar height

System information:

Distro: openSUSE Tumblweed
Compositor: Hyprland
Ironbar version: 0.16.1

Configuration

Share your bar configuration and stylesheet as applicable:

Config

let {
  $position = "top"
  $height = 20
  $margin = {
    top = 0
    left = 0
    right = 0
  }
  
  $clock = {
    type = "clock"
    name = "time-widget"
    format = "<span font-weight='bold'>%H:%M</span>, %a %d-%m-%y"
  }

  $launcher = {
    type = "launcher"
    show_names = false
    show_icons = true
    icon_size = 16
    reversed = false
  }

  $focused = {
    name = "focused-window"
    type = "focused"
    show_icon = true
    show_title = true
    icon_size = 16
    truncate = "middle"
  }

  $sys_info = {
    type = "sys_info"

    interval.memory = 10
    interval.cpu = 1
    interval.temps = 5
    interval.networks = 3


    format = [
      "C: {cpu_percent}%"
      "R: {memory_percent}%"
      "T: {temp_c:coretemp-Package-id-0}°C"
    ]
  }

  $upower = {
    type = "upower"
    icon_size = 16
  }

  $clipboard = {
      type = "clipboard"
      icon = "icon:edit-paste"
      icon_size = 16
      max_items = 10
      truncate.mode = "end"
      truncate.length = 50
    }

  $tray = {
    type = "tray"
    icon_size = 16
  }

  $notifs = {
    type = "notifications"
    show_count = true

    icons.closed_none = "󰍥"
    icons.closed_some = "󱥂"
    icons.closed_dnd = "󱅯"
    icons.open_none = "󰍡"
    icons.open_some = "󱥁"
    icons.open_dnd = "󱅮"

  }

  $logimage = {
    type = "image"
    src = "system-shutdown"
    name = "logimage"
    size = 20
  }

  $logbutton = {
    type = "button"
    name = "logbutton"
    widgets = [$logimage]
    on_click = "!wleave"
  }

  $logout = {
    type = "custom"
    bar = [$logbutton]
  }

  $center = []
  $end = [$sys_info $notifs $clipboard $upower $tray $clock $logout ]
} in {
  monitors.eDP-1 = {
    position = $position
    height = $height
    margin = $margin
    name = "ironbar-top"
    popup_gap = 0
    icon_theme = "breeze"
    start = [
      {
        type = "workspaces"
      }
      $launcher
      $focused
    ]
    center = $center
    end = $end
  }
}

Styles


* {
  font-family: "Noto Sans Regular";
  font-size: 12px;
  border: none;
  border-radius: 0;
  padding: 0;
}

.background {
  background: transparent;
}

/* -- workspaces -- */

.workspaces {
  margin-left: 2px;
  margin-right: 5px;
}

.workspaces .item {
  background: alpha(@theme_bg_color, 0.33);
  border: 0;
  border-radius: 10px;
  color: @theme_selected_fg_color;
  padding: 2px 5px;
  margin: 4px 2px;
}

.workspaces .item.visible {
  background: transparent;
  color: @theme_bg_color;
}

/*.workspaces .item.inactive {
}*/

.workspaces .item.focused {
  background: alpha(@theme_selected_bg_color, 0.666);
  color: @theme_selected_fg_color;
}

/* -- launcher -- */

.launcher {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  margin: 1px 0;
  padding: 0;
}

.launcher .item {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.launcher .item image {
  padding: 3px 7px;
}

.launcher .item:hover {
  background-color: alpha(@theme_selected_bg_color, 0.333);
  border-bottom: 2px solid @theme_selected_bg_color;
}

.launcher .ifix examtem:not(.focused):hover {
  background-color: @theme_selected_bg_color;
}

.launcher .open {
  border-bottom: 2px solid @theme_bg_color;
}

.launcher .focused {
  border-bottom: 2px solid @theme_selected_bg_color;
}

.launcher .focused image {
  background-color: alpha(@theme_selected_bg_color, 0.333);
}

.launcher .urgent {
  border-bottom-color: alpha(red, 0.333);
}

.popup-launcher {
  padding: 0;
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
}

.popup-launcher .popup-item {
  border-bottom: 2px solid @theme_bg_color;
}

.popup-launcher .popup-item:hover {
  border-bottom: 2px solid @theme_selected_bg_color;
  background-color: alpha(@theme_selected_bg_color, 0.33);
}

/* -- focused -- */

#focused-window {
  color: @theme_selected_fg_color;
  background-color: alpha(@theme_selected_bg_color, 0.5);
  border: 1px solid @theme_selected_bg_color;
  border-radius: 5px;
  padding: 0 7px;
  margin: 1px 5px;
}

/* -- sysinfo -- */

.sysinfo {
  border: 1px solid @theme_selected_bg_color;
  border-radius: 10px;
  background: alpha(@theme_selected_bg_color, 0.5);
  padding: 0 7px;
/*   margin: 1px 5px 1px 0; */
  margin: 1px 0;
}

.sysinfo .item {
  color: @theme_selected_fg_color;

}

/* -- clipboard -- */

.clipboard {
  font-size: 1em;
  /*background: @theme_bg_color;*/
  background: transparent;
  border: 0;
  border-radius: 0 ;
  margin: 1px 0;
}

.popup-clipboard {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  padding: 5px 7px;

}

.popup-clipboard .item {
/*   padding-bottom: 0.3em; */
  border-left: 3px solid @borders;
  background: @theme_bg_color;
  padding: 5px;
}

.popup-clipboard .item .btn-remove {
  border: 1px solid @borders;
  padding: 5px;
}

.popup-clipboard .item .btn-remove:hover {
  border: 1px solid @theme_selected_bg_color;
  background: alpha( @theme_selected_bg_color, 0.333);
}

/* notifications */

.notifications button {
  font-size: 1rem;
  color: @theme_bg_color;
  margin: 1px 0 1px 5px;
  /*background: @theme_bg_color;*/
  background: transparent;
  border: 0;
  border-radius: 5px 0 0 5px;
  padding: 0 5px 0 7px;
}

.notifications .count {
  font-size: 0.6rem;
  background-color: @theme_bg_color;
  color: @theme_fg_color;
  border-radius: 100%;
  margin-right: 3px;
  margin-top: 3px;
  padding-left: 4px;
  padding-right: 4px;
/*   opacity: 0.7; */
}

/* -- Upower -- */

.upower {
/*   margin: 0 3px; */
  margin: 1px 0;
  padding: 0;
/*   background: @theme_bg_color; */
  background: transparent;
  border: 0;
  border-radius: 0;
  color: @theme_bg_color;

}

.popup-upower {
  border-radius: 5px;
}

/* -- tray -- */

.tray {
/*   margin: 0 5px; */
  margin: 1px 0;
  padding: 0 5px;
  border-radius: 0 5px 5px 0;
/*   background: @theme_bg_color; */
  background: transparent;
}

.tray .item {
  padding: 0;
  margin: 0;
}

.tray .item:hover {
  background-color: @theme_selected_bg_color;
}


/* -- Date & Time -- */

.clock {
  background: alpha(@theme_bg_color, 0.8);

  color: @theme_fg_color;
  border: 1px solid @borders;
  border-radius: 5px;
  padding: 0 7px;
  margin: 1px 5px;
}

.popup-clock {
  background: @theme_bg_color;
  border: 1px solid @borders;
  border-radius: 5px;

  padding: 5px 7px;
}
.popup-clock .calendar-clock {
  font-size: 1em;
  font-weight: bold;
  padding: 5px;
}

.popup-clock .calendar {
  border: 1px solid @borders;
  border-radius: 5px;

  padding: 5px;
}

.popup-clock .calendar .header {
  border-radius: 0;
}

.popup-clock .calendar:selected {
/*   background-color: alpha(@theme_selected_bg_color, 0.333); */
  border: 1px solid @theme_selected_bg_color;
  border-radius: 0;
}

/* -- Logout button -- */

#logbutton {
  background: alpha(red, 0.666);
  border: 1px solid alpha(red, 0.666);
  border-radius: 5px;
  padding: 0 4px;
  margin: 1px 2px 1px 0;
}

Additional context

Add any other context about the problem here.

Screenshots

If applicable, add screenshots to help explain your problem.

Originally created by @salahoued on GitHub (Dec 9, 2024). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/809 **Describe the bug** > A clear and concise description of what the bug is. I'm not sure if this is an `ironbar` issue or a vlc one, but when vlc (flatpak) is launched, its tray icon is shown in `ironbar` too big which causes the bar height to grow big **To Reproduce** Steps to reproduce the behavior: 1. open vlc 2. observe the tray icon **Expected behavior** > A clear and concise description of what you expected to happen. tray icons should respect the `icon_size` option in the config, or if not declared should respect the bar `height` **System information:** - Distro: openSUSE Tumblweed - Compositor: Hyprland - Ironbar version: 0.16.1 **Configuration** > Share your bar configuration and stylesheet as applicable: <details><summary>Config</summary> ``` let { $position = "top" $height = 20 $margin = { top = 0 left = 0 right = 0 } $clock = { type = "clock" name = "time-widget" format = "<span font-weight='bold'>%H:%M</span>, %a %d-%m-%y" } $launcher = { type = "launcher" show_names = false show_icons = true icon_size = 16 reversed = false } $focused = { name = "focused-window" type = "focused" show_icon = true show_title = true icon_size = 16 truncate = "middle" } $sys_info = { type = "sys_info" interval.memory = 10 interval.cpu = 1 interval.temps = 5 interval.networks = 3 format = [ "C: {cpu_percent}%" "R: {memory_percent}%" "T: {temp_c:coretemp-Package-id-0}°C" ] } $upower = { type = "upower" icon_size = 16 } $clipboard = { type = "clipboard" icon = "icon:edit-paste" icon_size = 16 max_items = 10 truncate.mode = "end" truncate.length = 50 } $tray = { type = "tray" icon_size = 16 } $notifs = { type = "notifications" show_count = true icons.closed_none = "󰍥" icons.closed_some = "󱥂" icons.closed_dnd = "󱅯" icons.open_none = "󰍡" icons.open_some = "󱥁" icons.open_dnd = "󱅮" } $logimage = { type = "image" src = "system-shutdown" name = "logimage" size = 20 } $logbutton = { type = "button" name = "logbutton" widgets = [$logimage] on_click = "!wleave" } $logout = { type = "custom" bar = [$logbutton] } $center = [] $end = [$sys_info $notifs $clipboard $upower $tray $clock $logout ] } in { monitors.eDP-1 = { position = $position height = $height margin = $margin name = "ironbar-top" popup_gap = 0 icon_theme = "breeze" start = [ { type = "workspaces" } $launcher $focused ] center = $center end = $end } } ``` </details> <details><summary>Styles</summary> ```css * { font-family: "Noto Sans Regular"; font-size: 12px; border: none; border-radius: 0; padding: 0; } .background { background: transparent; } /* -- workspaces -- */ .workspaces { margin-left: 2px; margin-right: 5px; } .workspaces .item { background: alpha(@theme_bg_color, 0.33); border: 0; border-radius: 10px; color: @theme_selected_fg_color; padding: 2px 5px; margin: 4px 2px; } .workspaces .item.visible { background: transparent; color: @theme_bg_color; } /*.workspaces .item.inactive { }*/ .workspaces .item.focused { background: alpha(@theme_selected_bg_color, 0.666); color: @theme_selected_fg_color; } /* -- launcher -- */ .launcher { background: @theme_bg_color; border: 1px solid @borders; border-radius: 5px; margin: 1px 0; padding: 0; } .launcher .item { margin: 0; padding: 0; border: 0; border-radius: 0; } .launcher .item image { padding: 3px 7px; } .launcher .item:hover { background-color: alpha(@theme_selected_bg_color, 0.333); border-bottom: 2px solid @theme_selected_bg_color; } .launcher .ifix examtem:not(.focused):hover { background-color: @theme_selected_bg_color; } .launcher .open { border-bottom: 2px solid @theme_bg_color; } .launcher .focused { border-bottom: 2px solid @theme_selected_bg_color; } .launcher .focused image { background-color: alpha(@theme_selected_bg_color, 0.333); } .launcher .urgent { border-bottom-color: alpha(red, 0.333); } .popup-launcher { padding: 0; background: @theme_bg_color; border: 1px solid @borders; border-radius: 5px; } .popup-launcher .popup-item { border-bottom: 2px solid @theme_bg_color; } .popup-launcher .popup-item:hover { border-bottom: 2px solid @theme_selected_bg_color; background-color: alpha(@theme_selected_bg_color, 0.33); } /* -- focused -- */ #focused-window { color: @theme_selected_fg_color; background-color: alpha(@theme_selected_bg_color, 0.5); border: 1px solid @theme_selected_bg_color; border-radius: 5px; padding: 0 7px; margin: 1px 5px; } /* -- sysinfo -- */ .sysinfo { border: 1px solid @theme_selected_bg_color; border-radius: 10px; background: alpha(@theme_selected_bg_color, 0.5); padding: 0 7px; /* margin: 1px 5px 1px 0; */ margin: 1px 0; } .sysinfo .item { color: @theme_selected_fg_color; } /* -- clipboard -- */ .clipboard { font-size: 1em; /*background: @theme_bg_color;*/ background: transparent; border: 0; border-radius: 0 ; margin: 1px 0; } .popup-clipboard { background: @theme_bg_color; border: 1px solid @borders; border-radius: 5px; padding: 5px 7px; } .popup-clipboard .item { /* padding-bottom: 0.3em; */ border-left: 3px solid @borders; background: @theme_bg_color; padding: 5px; } .popup-clipboard .item .btn-remove { border: 1px solid @borders; padding: 5px; } .popup-clipboard .item .btn-remove:hover { border: 1px solid @theme_selected_bg_color; background: alpha( @theme_selected_bg_color, 0.333); } /* notifications */ .notifications button { font-size: 1rem; color: @theme_bg_color; margin: 1px 0 1px 5px; /*background: @theme_bg_color;*/ background: transparent; border: 0; border-radius: 5px 0 0 5px; padding: 0 5px 0 7px; } .notifications .count { font-size: 0.6rem; background-color: @theme_bg_color; color: @theme_fg_color; border-radius: 100%; margin-right: 3px; margin-top: 3px; padding-left: 4px; padding-right: 4px; /* opacity: 0.7; */ } /* -- Upower -- */ .upower { /* margin: 0 3px; */ margin: 1px 0; padding: 0; /* background: @theme_bg_color; */ background: transparent; border: 0; border-radius: 0; color: @theme_bg_color; } .popup-upower { border-radius: 5px; } /* -- tray -- */ .tray { /* margin: 0 5px; */ margin: 1px 0; padding: 0 5px; border-radius: 0 5px 5px 0; /* background: @theme_bg_color; */ background: transparent; } .tray .item { padding: 0; margin: 0; } .tray .item:hover { background-color: @theme_selected_bg_color; } /* -- Date & Time -- */ .clock { background: alpha(@theme_bg_color, 0.8); color: @theme_fg_color; border: 1px solid @borders; border-radius: 5px; padding: 0 7px; margin: 1px 5px; } .popup-clock { background: @theme_bg_color; border: 1px solid @borders; border-radius: 5px; padding: 5px 7px; } .popup-clock .calendar-clock { font-size: 1em; font-weight: bold; padding: 5px; } .popup-clock .calendar { border: 1px solid @borders; border-radius: 5px; padding: 5px; } .popup-clock .calendar .header { border-radius: 0; } .popup-clock .calendar:selected { /* background-color: alpha(@theme_selected_bg_color, 0.333); */ border: 1px solid @theme_selected_bg_color; border-radius: 0; } /* -- Logout button -- */ #logbutton { background: alpha(red, 0.666); border: 1px solid alpha(red, 0.666); border-radius: 5px; padding: 0 4px; margin: 1px 2px 1px 0; } ``` </details> **Additional context** > Add any other context about the problem here. **Screenshots** > If applicable, add screenshots to help explain your problem. ![2024-12-09-153425_hyprshot](https://github.com/user-attachments/assets/df3597c5-5817-4104-a52f-965a41eaef67)

JakeStanger

2026-05-23 02:53:23 +01:00

closed this issue
added the
P:Low

A:UX/UI

T:Bug

M:Tray
labels

JakeStanger commented

2026-05-23 02:53:24 +01:00

Author

Owner

@ToxicMushroom commented on GitHub (Dec 11, 2024):

I noticed the same with fcitx5

@ToxicMushroom commented on GitHub (Dec 11, 2024): I noticed the same with fcitx5

JakeStanger commented

2026-05-23 02:53:24 +01:00

Author

Owner

@JakeStanger commented on GitHub (Dec 11, 2024):

@ToxicMushroom what package manager did you use to install it? I was suspicious of Flatpak but that might blow that out the window

@JakeStanger commented on GitHub (Dec 11, 2024): @ToxicMushroom what package manager did you use to install it? I was suspicious of Flatpak but that might blow that out the window

JakeStanger commented

2026-05-23 02:53:24 +01:00

Author

Owner

@ToxicMushroom commented on GitHub (Dec 11, 2024):

Pacman 1 extra/fcitx5 5.1.11-1 [0 B 17.25 MiB] [Installed] (fcitx5-im)

@ToxicMushroom commented on GitHub (Dec 11, 2024): Pacman ` 1 extra/fcitx5 5.1.11-1 [0 B 17.25 MiB] [Installed] (fcitx5-im)`

JakeStanger commented

2026-05-23 02:53:24 +01:00

Author

Owner

@JakeStanger commented on GitHub (Dec 11, 2024):

Right, well it's not Flatpak then. New theory is that when the tray provides its on pixmap that's not being scaled down (properly).

@JakeStanger commented on GitHub (Dec 11, 2024): Right, well it's not Flatpak then. New theory is that when the tray provides its on pixmap that's not being scaled down (properly).

JakeStanger commented

2026-05-23 02:53:24 +01:00

Author

Owner

@salahoued commented on GitHub (Dec 11, 2024):

@JakeStanger , It may have something to do with the icon_theme used.

when using breeze or breeze-dark

when using Breeze-Dark with capital letters it falls back to the default one and it works fine the icon (vlc's) shows correctly

the same for Papirus-Dark it worked fine too

@salahoued commented on GitHub (Dec 11, 2024): @JakeStanger , It may have something to do with the `icon_theme` used. when using `breeze` or `breeze-dark` ![2024-12-11-202545_hyprshot](https://github.com/user-attachments/assets/5d74efb0-3f86-4654-8bea-ac8ef7dc9811) when using `Breeze-Dark` with capital letters it falls back to the default one and it **works fine** the icon (vlc's) shows correctly ![2024-12-11-202504_hyprshot](https://github.com/user-attachments/assets/f1f5db4a-e140-4728-af1d-dcc82f20d127) the same for `Papirus-Dark` it **worked fine** too ![2024-12-11-202014_hyprshot](https://github.com/user-attachments/assets/ac9e6a20-cdfb-49b0-b376-ad4c79e19f30)

JakeStanger commented

2026-05-23 02:53:25 +01:00

Author

Owner

@ogios commented on GitHub (Dec 12, 2024):

we can force scale it ourself.
scale = icon_size / actual_height, and use image surface to redraw it or some other way.

use height/width for horizontal/vetical bar.
this is an example

@ogios commented on GitHub (Dec 12, 2024): we can force scale it ourself. scale = icon_size / actual_height, and use image surface to redraw it or some other way. use height/width for horizontal/vetical bar. [this](https://github.com/way-edges/way-edges/blob/master/src%2Fplug%2Ftray%2Ficon.rs#L28-L42) is an example

JakeStanger commented

2026-05-23 02:53:25 +01:00

Author

Owner

@JakeStanger commented on GitHub (Dec 15, 2024):

@JakeStanger , It may have something to do with the icon_theme used.

Hm yeah, buggy icon themes could be a problem. It may be possible to perform a check on the size of the loaded image and scale that, as I don't think the above PR will account for icons from the theme.

@JakeStanger commented on GitHub (Dec 15, 2024): > @JakeStanger , It may have something to do with the icon_theme used. Hm yeah, buggy icon themes could be a problem. It may be possible to perform a check on the size of the loaded image and scale that, as I don't think the above PR will account for icons from the theme.

JakeStanger commented

2026-05-23 02:53:25 +01:00

Author

Owner

@ogios commented on GitHub (Dec 16, 2024):

some theme don't have the size we wanted, and the difference can be big

@ogios commented on GitHub (Dec 16, 2024): some theme don't have the size we wanted, and the difference can be big <img src="https://github.com/user-attachments/assets/8914788d-5fdf-44c9-b24f-dba81935b4e0" height="300">

Rows
Columns

[GH-ISSUE #809] vlc tray icon not respecting icon_size #7277

[GH-ISSUE #809] vlc tray icon not respecting `icon_size` #7277