img/initials.svg

<svg fill="none" viewBox="0 0 48 48" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">

            <style>
                .initial-avatar {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    height: 48px;
                    width: 48px;
                    background-color: teal;
                    color: white;
                    font-weight: bold;
                    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
                    font-size: 24px;
                }
            </style>

            <div class="initial-avatar">LP</div>

        </div>
    </foreignObject>
</svg>