# How to display SVG files in Elm

**URL:** <https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039>\
**Category:** Learn\
**Created:** [January 2, 2022, 8:20am UTC](https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039 "2022-01-02T08:20:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mckahz](https://avatars.discourse-cdn.com/v4/letter/m/c68b51/32.png) [@mckahz](https://discourse.elm-lang.org/u/mckahz)\
**Post date:** [January 2, 2022, 8:20am UTC](https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039/1 "2022-01-02T08:20:20Z")

</div>

What is the simplest way to include an SVG file on your website? I’m trying to include icons with  
image [] { src = “assets/icons/feather.svg”, description = “” }  
but this doesn’t work.  
And many SVG libraries are out of date.  
Anyone know how to fix this? Cheers!

---

<div class="post-metadata">

**Author:** ![IloSophiep](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ilosophiep/32/3489_2.png) [@IloSophiep](https://discourse.elm-lang.org/u/IloSophiep)\
**Post date:** [January 2, 2022, 8:48am UTC](https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039/2 "2022-01-02T08:48:13Z")

</div>

Edit: Looks like I missed that you’re using elm-ui. Most of what I wrote is wrong and can be ignored, sorry 😃

> [@mckahz](#):
>
> image { src = “assets/icons/feather.svg”, description = “” }

Is that exactly the code you are using? If so, i think that could be your problem, because the following things are not quite correct:

- You are using `image` instead of `img`
- You are setting the attributes inside of `{ .. }` and in the wrong place
- You are missing the empty array `[]` for child nodes
- You are using weird quotation marks `“ ”` instead of `" "`

I think what should work is something like

```elm
Html.img
     -- Note attributes
    [ Html.Attributes.src "assets/icons/feather.svg"
    , Html.Attributes.attribute "description" "This is my description"
    ]
    -- Child notes
    []

```

(I used the namespaces for easier understanding. If you imported those you can of course drop them and write e.g. `img [src ..] []`)

Also: Are you using “description” as an attribute on purpose? Usually one would use `alt` or `title` attributes, i think.

Next time i would suggest you show an actual part of your code and the compiler error if possible. That helps people understand what exactly your problem is. I hope i guessed correctly what is “wrong” for you right now though.

---

<div class="post-metadata">

**Author:** ![passiomatic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/passiomatic/32/1250_2.png) [@passiomatic](https://discourse.elm-lang.org/u/passiomatic)\
**Post date:** [January 2, 2022, 9:31am UTC](https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039/3 "2022-01-02T09:31:02Z")

</div>

From the API I have the impression that you are using Elm UI ([Element - elm-ui 1.1.8](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#image))

Including SVG as an image works fine, but if you want to use a SVG icon set your best bet is to switch to the specific package, ex. [FeatherIcons - elm-feather 1.5.0](https://package.elm-lang.org/packages/feathericons/elm-feather/latest/FeatherIcons)

---

<div class="post-metadata">

**Author:** ![Atlewee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/atlewee/32/4603_2.png) [@Atlewee](https://discourse.elm-lang.org/u/Atlewee)\
**Post date:** [January 2, 2022, 11:37am UTC](https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039/4 "2022-01-02T11:37:51Z")

</div>

Your code is correct… And the simplest way to show an SVG.  
It must be something with hosting of your svg-file or the link you use.  
(check browser-console for 404 error)  
Here is a working ellie of what your code does:  
[https://ellie-app.com/ghzmCw8qQN5a1](https://ellie-app.com/ghzmCw8qQN5a1)

I usually use elm/svg for all my icons… and just create them purely in elm without any library.  
They are usually just a single Svg.path anyway. so simple to copy paste from source.  
example:

```elm
svg [viewport "0 0 24 24"] [path [ d "xxxyyyzzz"] [] ]

```

This way you can also add something like fill “currentColor” and the icon will be filled with the color specified as Font.color on the parent elm-ui element.  
It is also super easy to customize the icon by just passing parameters.  
And you have zero dependencies to worry about.

And by the way, in elm, even if a library has not had an update for two years it is probably not out-of-date, just stable 🙂

---

<div class="post-metadata">

**Author:** ![mckahz](https://avatars.discourse-cdn.com/v4/letter/m/c68b51/32.png) [@mckahz](https://discourse.elm-lang.org/u/mckahz)\
**Post date:** [January 2, 2022, 2:15pm UTC](https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039/5 "2022-01-02T14:15:40Z")

</div>

Wow. Thanks. I was using feather icons anyway. Didn’t know elm had a library for specifically that.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [January 12, 2022, 2:16pm UTC](https://discourse.elm-lang.org/t/how-to-display-svg-files-in-elm/8039/6 "2022-01-12T14:16:29Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.