like the title says - I am trying to achieve this:

This is my HTML code (it is JSX but the only thing different between JSX and HTML is the fact that class is called className as it is a reserved JS keyword):

<div className="snavbarcontainer">
            
            <div className="toplefticon">
            </div>

            <div className="mainIcons">
                <ul className="icons_ul">
                    <li className="top_time"><a href="#"><img src={topleft} alt="Testing Logo" /></a></li>
                    <li><a href="#"><img src={ILookupPupils} alt="Pupil Lookup" /></a></li>
                    <li><a href="#"><img src={IMUsers} alt="Manage Users" /></a></li>
                    <li><a href="#"><img src={IHand} alt="Coming Soon" /></a></li>
                    <li><a href="#"><img src={IMAdmins} alt="Manage Admins" /></a></li>
                    <li><a href="#"><img src={IDash} alt="Dashboard" /></a></li>
                    <li><a href="#"><img src={IDB} alt="Dashboard" /></a></li>
                </ul>
            </div>

        </div>

My (S)CSS:

body {
    //! background-color: red; - DEBUGGING ONLY!
    margin: 0
}

.snavbarcontainer {
    background-color: black;
    width: 3.5em;
    height: 100vh;
    position: fixed;
    
    display: grid;
    place-items: center;
}

.icons_ul {
    text-decoration: none;
    list-style-type: none;
    padding: 0;
    
    li /* Adds property to EACH LI, not the UL itself. */{
        margin: 1em 0;
    }
}

.toplefticon {
    justify-content: top;
    align-items: flex-start;    
    order: 1;
}

.top_time {
    margin: auto;
}

Thanks for your help.