sizing .svg on telephone

declare an absolute Value – for width f.e.: 40px and then your max-width value

As a participant as you i can not see private content – may we others see the page it concerns?

it concerns the “how i add value” icons ?

@media only screen and (max-width: 767px) {
  #top.page-id-289 img[src*=".svg"] {
    width: 150px;
  }
}

another hint:
i wouldn’t have for each an own color-section.
You can do that all “how i add value” in one color section. To better select the color section give a custom class to it and tell the img to have a specific width.
___________________

this is a bit offtopic
because you do not have a script that converts img svgs to inline svgs – the following does not affect you directly. But if you also work with svgs as inline svgs, you have to think about the graphic styles:

btw: as inline svg files this would not work – because all these svg files got the same classes inside – but with different declarations!
( new illustrator standard class: cls-index ) so they will disturb each other

/***** claritymatters-icons_icon-compelling-story.svg *****/

.cls-1 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
}

.cls-2 {
  fill: #2ec4ed;
}

/***** claritymatters-content-roadmap.svg  *****/
.cls-1 {
  fill: #fff;
}

.cls-2, .cls-3 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4px;
}

.cls-4 {
  fill: #2ec4ed;
}

.cls-3 {
  stroke-dasharray: 12;
}