---
id: 686d749d6f32f708fdf2b7ad
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---

# --description--

In a previous lesson, you learned about `svg` elements and how they're often used as icons in projects. In real-world codebases, you would typically rely on icon libraries, so you don't need to create `svg` elements from scratch. However, in this workshop, you'll build a heart icon to learn about the core attributes used inside an `svg` element.

Start by creating an `svg` element on the page.

# --hints--

You should have an `svg` element on the page.

```js
const svg = document.querySelector('svg');
assert.exists(svg);
```

# --seed--

## --seed-contents--

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Heart Icon</title>
  </head>
  <body>
    --fcc-editable-region-- 
    
    --fcc-editable-region--
  </body>
</html>
```
