# Issues with unit 3 icons

**URL:** <https://forum.codewithmosh.com/t/issues-with-unit-3-icons/20283>\
**Category:** HTML/CSS\
**Created:** [May 16, 2023, 3:26pm UTC](https://forum.codewithmosh.com/t/issues-with-unit-3-icons/20283 "2023-05-16T15:26:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rinne6paths](https://avatars.discourse-cdn.com/v4/letter/r/7bcc69/32.png) [@Rinne6paths](https://forum.codewithmosh.com/u/Rinne6paths)\
**Post date:** [May 16, 2023, 3:26pm UTC](https://forum.codewithmosh.com/t/issues-with-unit-3-icons/20283/1 "2023-05-16T15:26:32Z")

</div>

So im trying to follow along and my chevron icon isn’t displaying properly. has anyone else had this issue? i tried to go back and recreate the sprites, but thats not working either. any assistance would be super helpful.

Html

```auto
<body>
    <div class="collapsible">
      <header class="collapsible__header">
        <h2 class="collapsible__heading">Item 1</h2>

        <svg class="icon icon--primary">
          <use xlink:href="images/sprite.svg#chevron"></use>
        </svg>
      </header>
      <div class="collapsible__content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem quia
        saepe pariatur, eius hic quis.
      </div>
    </div>
  </body>
</html>

```

CSS

```auto
.icon {
    width: 40px;
    height: 40px;

}

.icon--small {

    width: 30px;
    height: 30px;
}

.icon--primary {
    fill: var(--color-primary);
}

.icon--white {
    fill: #fff;
}

.icon-container {
    background: #f3f9fa;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.icon-container--accent {
    background: var(--color-accent);
    
 }

```

SVG file

```auto
<svg width="0" height="0" class="hidden">
   <symbol id="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
    <defs></defs>
    <circle cx="25.5" cy="25.5" r="25.5"></circle>
    <rect x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"></rect>
    <rect x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"></rect>
  </symbol>

```

---

<div class="post-metadata">

**Author:** ![sufian.babri](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sufian.babri/32/1028_2.png) [@sufian.babri](https://forum.codewithmosh.com/u/sufian.babri)\
**Post date:** [May 23, 2023, 5:17pm UTC](https://forum.codewithmosh.com/t/issues-with-unit-3-icons/20283/2 "2023-05-23T17:17:24Z")

</div>

From where which part (of the course) and the video/section did you download the SVG from? There’s some issue with the SVG file you’ve shared here.

---

<div class="post-metadata">

**Author:** ![teaandmoney](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@teaandmoney](https://forum.codewithmosh.com/u/teaandmoney)\
**Post date:** [July 13, 2023, 10:41am UTC](https://forum.codewithmosh.com/t/issues-with-unit-3-icons/20283/3 "2023-07-13T10:41:06Z")

</div>

It’s from part 3 of the HTML/CSS course. I’m having the same problem too  
Episode 26

---

<div class="post-metadata">

**Author:** ![lucidlear](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/lucidlear/32/5477_2.png) [@lucidlear](https://forum.codewithmosh.com/u/lucidlear)\
**Post date:** [July 13, 2023, 10:47am UTC](https://forum.codewithmosh.com/t/issues-with-unit-3-icons/20283/4 "2023-07-13T10:47:05Z")

</div>

Will this help [here](https://forum.codewithmosh.com/t/icon-problem-chevron/15952)