Не меняется fill иконке при фокусе инпута

html

<div class="contact-form__input-wrapper">
<input type="tel" id="user-phone" name="user-phone" class="contact-form__input" required>
<svg class="contact-form__icon" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.7263 8.86511L9.88811 8.65525C9.44667 8.60459 9.01246 8.75656 8.70128 9.06775L7.36971 10.3993C5.3217 9.35722 3.64276 7.68551 2.60067 5.63025L3.93947 4.29144C4.25065 3.98025 4.40263 3.54605 4.35197 3.1046L4.1421 1.28092C4.05526 0.549999 3.44013 0 2.70198 0H1.45002C0.632259 0 -0.0479991 0.680262 0.00265842 1.49802C0.386208 7.67827 5.32894 12.6138 11.5019 12.9973C12.3197 13.048 12.9999 12.3677 12.9999 11.55V10.298C13.0072 9.56709 12.4572 8.95196 11.7263 8.86511Z" fill="#2E2F42"/>
</svg>
</div>

css

.contact-form__input:focus + .contact-form__icon {
fill: var(--primary-brand);
}

Проблема :не меняется цвет при фокусе моего инпута..