Como alinhar uma imagem a esqueda, precisamente no topo de uma div

[ThiagoKay]

 Queria saber como deixar a tg.png no topo, a esquerda desta div:

 

<div id="inicial">
        <div class="avisos">
            <img src="o/tg.png" alt="logo" id="logo">
            <h1>Seja bem vindo !</h1>
            <p>Acesse nossos conteudos abaixo</p>
        </div>
        <br>
        <hr>
        <br>
        <div class="lista">
            <nav>
                <ul>
                    <li>Lorem Ipsum</li>
                    <li>Lorem Ipsum</li>
                    <li>Lorem Ipsum</li>
                    <li>Lorem Ipsum</li>
                </ul>
            </nav>
        </div>
    </div>

CSS:

#logo {
    width: 10rem;
    border-radius: 10%;
}

#inicial {
    background: radial-gradient(circle, rgb(20, 20, 20), rgb(17, 17, 17));
    display:flex;
    flex-direction: column;
    margin: 0 auto;
    width: 40rem;
    padding:2rem;
    box-shadow: 1px 2px 4px 2px black;
}

#inicial > .avisos {
    font-family: 'Abel';
    font-size: 1.5rem;
    color:rgb(170, 170, 170);
    text-align: center;
}