Bigger edit icons

I have this add-on to make edit icons bigger:

from anki.hooks import addHook

CSS = """
        .topbut {
            width: 32px;
            height: 32px;
button {
    height: 44px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-appearance: none;
    outline: none;
    background-color: #3e4e58 !important;

JS = f"""
    document.head.insertAdjacentHTML('beforeend', `{CSS}`);

addHook('setupEditorShortcuts', lambda _, editor: editor.web.eval(JS))

It seems to me that in current version uses svg files for icons.

So, I have bigger icons’ frame and relatively small icons.

Can someone tell me how to adjust this code so that icons are 150 % bigger?

I need this because I have poor sight.

If you are using the latest version(2.1.50) of Anki, try installing CSS Injector - Change default editor styles, and then typing the following into editor.css:

.button-toolbar {
    --buttons-size: 2.5rem !important;

Change 2.5rem to your liking. To see the effect of the changes, close the editor window and re-open it. (No need to restart Anki.)


Fwiw, in Anki 2.1.50, I can just hold Ctrl and rotate the mouse wheel to change zoom of the editor. That makes everything bigger, the fields and the buttons as well.


Thank you it worked. By the way, do you know if it is possible to use this add-on to change the color of a specific field name in editor in a specific Note Type?

Something like:
Note type:Cloze; field_name:Headword; color:red

From the description on the add-on page and a quick glance at the add-on source code, it appears that this is probably not possible at this time.


Now it is :+1:

I have added support for a couple of new attributes to the 2.1.50+ branch of the add-on:

  • both html (editor) and anki-editable (field):
    • notetype name: [notetype]
  • only anki-editable:
    • field name: [field]
    • field index (starting with 1): [ord]

Here’s an overview of the possibilities: