Why won't HTML button images not shrink?

I've been trying to resolve this issue off and on for about a week or so, and am asking for help here as a last resort. I have website where there are dynamically build unordered lists that contain text, a checkbox, and two buttons. Each button has an image associated with it. Although the buttons work, the images are far too large and do not even display in a single "row" in the list.

Screenshot of Problem on Webpage

What I'd like to do is make the button images slightly larger than the checkbox, and have the text, checkbox, and both buttons on the same line. I'd also like to right align the checkbox and buttons, while leaving the text left aligned.

This is how I am adding the checkbox and buttons to the list dynamically in a function:

//Create the checkbox to add to the list element
    var select_checkbox = document.createElement('input');
    select_checkbox.type = 'checkbox';
    select_checkbox.id = json[i].deck_ID;

    //Add the checkbox to the list element
    list_item.appendChild(select_checkbox);

        //Create the delete button to add to the list element
        var delete_button = document.createElement('button');
        delete_button.type = 'submit';
        delete_button.style = 'background-color:transparent; border-color:transparent;';
        delete_button.id = json[i].deck_ID;
        delete_button.name = "delete_deck";
        delete_button.class = "icon";
        delete_button_image = document.createElement('img');
        delete_button_image.src = 'icons/trashcan.png';
        delete_button.appendChild(delete_button_image);
        list_item.appendChild(delete_button);

        //Create the delete button to add to the list element
        var hide_button = document.createElement('button');
        hide_button.type = 'submit';
        hide_button.style = 'background-color:transparent; border-color:transparent;';
        hide_button.id = json[i].deck_ID;
        hide_button.name = (json[i].hidden=='1')?"unhide_deck":"hide_deck";
        hide_button.title = (json[i].hidden=='1')?"Unhide Deck":"Hide Deck";
        hide_button.class = "icon";
        hide_button_image = document.createElement('img');
        hide_button_image.src = 'icons/unhidden_eye.png';
        hide_button.appendChild(hide_button_image);
        list_item.appendChild(hide_button);

I've tried setting a fixed width and height by delete_button.setAttribute(...) but that did not change the size. I've also tried changing the button size in CSS, using a similar style to fix width and height. I even tried shrinking the size of the image itself, but to no avail. Here are where the lists are on the HTML page:

<div class="container" id="container">
    <div class="row" id="row">
        <div class="col-sm-4" id="faculty">
            <ul id="faculty_list" class="list-unstyled"></ul>
        </div>
        <div class="col-sm-4" id="student">
            <ul id="student_list" class="list-unstyled"> </ul>
        </div>
    </div>
</div>

I don't have much CSS right now for unordered lists:

ul{
    text-align: left;
}