enter image description here

I have this view on a design, but how I can smooth border around the circle ?

What I have now :
enter image description here

<div className={style.WrapperForSpan}>
                                <span className={style.Span}>
                                    <svg
                                        className={`${style.Icon} ${style.IconFill} ${style.IconPlus}`}
                                    >
                                        <use xlinkHref={`${sprite}#plus`} />
                                    </svg>
                                </span>
                            </div>

I created next component with next style

.WrapperForSpan {
    position: absolute;
    top: 50%;
    left: 87%;
}

.Span {
    position: absolute;
    top: 30%;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background-color: $pink;

    border-radius: 50%;
    border: 6px solid $dark-black;
}

But it`s not correct.