Issues with unit 3 icons

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.


    <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>
      <div class="collapsible__content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem quia
        saepe pariatur, eius hic quis.


.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

<svg width="0" height="0" class="hidden">
   <symbol id="chevron" xmlns="" viewBox="0 0 51 51">
    <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>

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.

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

Will this help here