How to make animated icon flex

[SENEK]

hello all

i am using some animated icons from lordicon.com
here the code (without the link part for paid icon) that I use from their website

<script src="https://cdn.lordicon.com/lordicon.js"></script>
<lord-icon trigger="hover" colors="primary:#e4e4e4,secondary:#e4e4e4" style=**"width:50px;height:50px"** src="https://cdn.lordicon.com/xxxxxx.json">
</lord-icon>

I use them in 50x50px
I would like to make them 24x24px on mobile device and 50x50px on desktop
I thought that using
row and 4 columns and div container in each, with the code widget for the animated icon
will let me choose through the div container to make them at the size I want depending of the break point:
but it doesn’t work, and I tried to play with positioning, size, padding etc but only the script code reduce not the icon itself when looking in preview

is there a solution to make a code widget of an animated icon in different size depending of the breakpoint?
like an image or gif
I tried to search on the bootstrap 5 classes but didn’t find something useful

thx

here on XS and LG same size
XS:

LG:

[Ethan96]

To make your animated icons responsive based on the screen size, you can use CSS media queries. Here’s a quick solution:

@media (max-width: 767px) {
  .icon {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 768px) {
  .icon {
    width: 50px;
    height: 50px;
  }
}

Apply the icon class to your lord-icon tag:

<lord-icon class="icon" trigger="hover" colors="primary:#e4e4e4,secondary:#e4e4e4" src="https://cdn.lordicon.com/xxxxxx.json"></lord-icon>

This will scale the icon to 24x24px on mobile and 50x50px on larger screens.

[SENEK]

super thank you
will try out

edit: just tried out and doesn’t work …