I know there are other and newer ways to create scalable vector graphics, but this is my favorite: jump on over to Font Awesome (https://fortawesome.github.io/Font-Awesome/) and get yourself some web graphics. I recommend downloading the library instead of calling the CDN, as the loading lag time may cause something else to fail. Download it and put it in a lib folder.

Before you can start creating the sun, moon, stars, and clouds, you need to inject the Font Awesome CSS into your HTML. So, in the head element, before the CSS, add the link to the CSS file, as in the following example. I'm currently using version 4.4.0, but use the latest one when you try this:

<link rel="stylesheet" href="lib/font-awesome-4.4.0/css/font-awesome.min.css">

In the beginning, there was nothing. If you look at the HTML in your browser, you will see only a black box, and I'm sure you are not impressed: