(888) 555-5555

Adding An Icon

Adding An Icon

This green plus icon is from the Phosphor Icons collection and is called plus.

I found the icon using the search feature on phosphoricons.com and then searched for plus.svg on my computer.

To get the svg code I opened the icon with view source.

After that I created a container, inner container and container inside the inner container.

Add the Shape to the inner container.

Click on the Shape Icon and you can see the Open Library.

Click on that and navigate to Custom SVG – that shows the code which creates the SVG icon – delete that (using clear is not the quickest way) now take the code from the View Source and paste that into the box.

Click Insert.

Next it is best to add a background colour to the icon – helps see it.

The icon will now be on a coloured square.

To make the icon round

Click on the round circle which is half black and half white

Layout FLOATS set to left

Spacing set to .75 rem

Background the colour of your choice

BORDDER RADIUS 100% – makes the graphic round

Margin of the Icon set that to right 30 to 40 px for the spacing text butting up to the icon

The size of the graphic is set on the Gear page WIDTH 32px HEIGHT 32px are two popular sizes.

To get the text in middle I have made the block 50% of the whole and also used the JUSTIFY SELF and center

Adding An Icon

Adding An Icon