• HTML
• CSS
• JS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="list">
    <div class="user">
        <div class="imgBx">
            <img src="image.jpg">
        </div>
        <div class="details">
            <h3>Neil Amaly</h3>
            <p>Aerospace Enginner</p>
        </div>
    </div>
    <div class="navigation">
        <div class="points">
            <span><i class="fa-regular fa-pen-to-square"></i></span>
            <span><i class="fa-regular fa-heart"></i></span>
            <span><i class="fa-solid fa-share-nodes"></i></span>
        </div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#fdf2e9;
}
.list{
    width:250px;
    background:#fff;
    padding:0.7em;
    border-radius:0.5em;
    box-shadow:1px 1px 10px rgba(0,0,0,0.1);
    text-align:center;
}
.imgBx img{
    width:100%;
}
.navigation{
    display:flex;
    justify-content:center;
    margin:0.5rem;
}
.navigation .points{
    display:flex;
    gap:4px;
    cursor:pointer;
    padding:0.5em;
}
.navigation .points span{
    width:6px;
    height:6px;
    background:#222327;
    border-radius:50%;
    transition:0.5s;
    display:flex;
    justify-content:center;
    align-items:center;
    border:3px solid #222327;
}
.navigation .points span:hover{
    background:#fff;
}
.navigation .points.active span{
    width:50px;
    height:50px;
}
.navigation span i{
    transition:0.3s;
    font-size:0em;
}
.navigation .points.active span i{
    font-size:1.25em;
    color:#fff;
}
.navigation .points.active span:hover i{
    color:#222327;;
}
.list .user .details h3{
    font-weight:600;
    line-height:1.5em;
}
.list .user .details p{
    font-weight:500;
    font-size:0.9em;
    color:rgba(0,0,0,0.6);
}

JS

let navigation = document.querySelector('.navigation .points');
navigation.onclick = function(){
    navigation.classList.toggle('active');
}