Create a lightning bolt design (like The Flash)

Question

I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the

Answer 1

You can achieve a slightly different lighting bolt with html symbols. Note that not all browsers support all of them.

Here is a quick example what you can do with just css/html.

.circle {
	border-radius: 50%;
    border: 4px solid black;
	width: 100px;
	height: 100px;
    font-size: 70px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background: white;
}

.square{
    border: 4px solid red;
    width: 106px;
    height: 106px;
    background: red;
}

    
⚡

Advantage of this one is that this is simple, does not require anything. Disadvantage is that the bolt is slightly different and that not all browsers might support the symbol.

If you need exact picture, generate it in SVG and add as an svg or a font.

Sadly enough it looks like the sign is not visible on windows, but on macos (chrome) it looks this way:

On ubuntu it also visible, but looks differently.