Plea from and Older User about small icons

New user, v 23.08.03. I see from a 10 Nov commit by Joshua that support for lists is coming soon. Thanks for that! I have one additional request - make those pencil-thin icons (e.g., for boost, favorite, etc.) slightly larger in stroke thickness. 65 year old eyes have enough problems seeing. While the design of the icons are nice, at one-pixel in width (I downloaded the .svg file and looked) they’re simply not big enough (e.g., on a white background both the color and the checkmark are mostly illegible on my 24" HD monitor). A titch better if I change to the BreezeDark theme. I realize adding an “Old People” theme is a bit of work (though god knows I’d really, really, really welcome that for nearly every computer application/OS I use LOL including the default Breeze icons that, e.g., are on the panel), but modifying those .svg files is probably far easier.


Good point, also in respect concerning general inclusiveness and accessibility

1 Like

I do agree that the pixel width can be too small, and on a desktop monitor they are small by default. We’re looking into a way to increase their size to make them more legible and clickable :slight_smile:


Thank you. As a example, check out the main Mastodon web UI icons for boost, etc. Those icons are, for my old eyes, quite good, just a few pixels wider than tokodon’s icons, but that’s enough for visual clarity. They are also using svg objects.

1 Like

Are we talking about icons in the Breeze icon themes here, or assets bundled with Tokodon?

1 Like

Assets bundled with the app (boost, favorite, etc). Not the icons used by the window manager (task manager. Etc).


Can you share a screenshot of the icons in question?

As requested, five screen shots showing the “back” icon that apparently does not have a “dark theme” version, so it’s invisible, the four primary icons for reply, boost, favorite, and bookmark in both default and dark themes.


I used KDE’s Spectacle to take those four screen caps of the icons pre- and post-use for the boost and favorite icons. Each of the images are larger in the discuss upload than the displayed apps icons, so they are not as clearly a problem (I think discuss has scaled them in the discussion UI).

Here is a much larger screen cap that shows the problem better. It’s very hard to see that the boost icon is “post-boost” or that it has changed by the addition of a check mark. The same is true for the breeze dark theme. Both of the boost icons for default breeze and dark breeze have sufficient contrast to be visible (and this image, oddly enough, is scaled smaller by the discuss UI :-/).


Oh that’s weird, the icons are not supposed to be that small. Have you configured the font system-wide or inside of Tokodon (the content font setting)? Then I might be able to tie button scaling to that

Ideally the system would be scale by using the officially supported scaling feature rather than making the fonts huge, since that doesn’t also scale up iconography or raster images.


Several things. Those screen-cap images are misleading in the Discuss UI. It looks as if the Discuss UI has itself scaled them, e.g, so that that screencaps of the icons “fit” - they are thus too large compared to what I see in tokodon. And the larger screencap showing more of the application is, in this Discuss UI, smaller that what I see in tokodon. We can’t do anything about this.

To answer your questions.

  • I AM scaling my display using KDE’s System Settings controls - 125% Global Scale.
  • I have modified my fonts to be larger: one pixel increase from the default, from 10pt to 11pt
  • I have forced font DPI; 120
  • In tokodon, I’m using font Kreon at 12pt

My posts here are not so much about the font (I’m very grateful tokodon provides the option to modify the font for my preference) as it is those icons. Consider the problem of contrast - a white icon on a dark background has excellent contrast. That same icon in green on a dark background has poor contrast. A dark icon on a white background has excellent contrast. That same dark icon in green with a 1-pixel wide stroke has poor contrast. There’s simply not enough colored pixels to be visible against either dark or light backgrounds.

I realize that light/dark themes really, really make your life harder (from personal experience with css in my pre-retirement IT life).

Ah, it’s only the green icon? In that case it sounds like the problem is in fact in the Breeze Dark color scheme, for using a Positive Text color that’s too dark. That’s assuming the green icon is correctly using the Positive Text color from the color scheme. If it’s not, then the problem is in the icon itself.


It’s not using the colors from the theme, they’re hardcoded in that release :nauseated_face:


Came here to say that LOL I’m setting the theme in tokodon in tokodon’s settings, not following the primary KDE theme. So it has to be the svg images used by the app. I maintain, though, that the current color would be more visible if the 1-pixel wide strokes used by the svg icons were wider (as in the examples I’ve mention, both GIMP and the mastodon web UI).

GAH!! I have edited one of the svg files to show what I mean - but Discuss will not allow me to add it to this post in this thread. Here’s a Dropbox link:

Speaking of hardcoding, may I ask if all the icons themselves are hardcoded too? My system icon theme is Papirus but tokodon from Flathub uses only Breeze icons.


That’s a Flatpak-specific issue, Tokodon will follow the system icon theme normally (but we really recommend using Breeze.) There’s probably some trick to allow Flatpak to read your system icons, but I don’t know… I’m just a normal Breeze user :laughing:

In the current stable release, the interaction icons (as shown above) are hardcoded to our own. In 24.02 (that’s February) they will be able be themed by other icon themes, if supported.

flatpak override --filesystem=~/.local/share/themes

this may fix the icon theme?

1 Like

@gstalnaker, in future, you might be able to post the SVG file content in a code block, like

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape ( -->

   viewBox="0 0 210 297"
   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
     inkscape:current-layer="layer1" />
     id="defs1" />
     inkscape:label="Layer 1"
     id="layer1" />


if you find that easier.