CSS Shapes and Icons Generator

CSS/CSS3 shapes and icons generator make use of single html element to generate icon. Change the color and size of icon as you need.

The html part of each icon in CSS icon generator contains single <i> element and it’s styled from CSS by using CSS pseudo elements. Click on below shapes and icons to get code.

CSS Shapes

circle square rectangle triangle up triangle right triangle down triangle left triangle top left triangle top right triangle bottom right triangle bottom left oval horizontal oval vertical trapezoid diamond square cone parallelogram 1 parallelogram 2 rectangle rounded edge pentagon diamond shield diamond cut base hexagon octagon 8 point burst 12 point burst TV screen star drum narrow







CSS Icons

plus plus circle outline plus square outline plus circle filled plus square filled minus minus circle outline minus square outline minus circle filled minus square filled cross cross circle outline cross square outline cross circle filled cross square filled k-arrow left k-arrow left circle outline k-arrow left square outline k-arrow left circle filled k-arrow left square filled k-arrow right k-arrow right circle outline k-arrow right square outline k-arrow right circle filled k-arrow right square filled k-arrow up k-arrow up circle outline k-arrow up square outline k-arrow up circle filled k-arrow up square filled k-arrow down k-arrow down circle outline k-arrow down square outline k-arrow down circle filled k-arrow down square filled arrow right arrow right circle outline arrow right square outline arrow right circle filled arrow right square filled arrow left arrow left circle outline arrow left square outline arrow left circle filled sarrow left quare filled arrow up arrow up circle outline arrow up square outline arrow up circle filled arrow up square filled arrow down arrow down circle outline arrow down square outline arrow down circle filled arrow down square filled arrow backward carrow backward circle outline arrow backward square outline arrow backward circle filled arrow backward square filled arrow forward arrow forward circle outline arrow forward square outline arrow forward circle filled arrow forward square filled arrow upward arrow upward circle outline arrow upward square outline arrow upward circle filled arrow upward square filled arrow downward arrow downward circle outline arrow downward square outline arrow downward circle filled arrow downward square filled arrow drop left arrow drop left circle outline arrow drop left square outline arrow drop left circle filled arrow drop left square filled arrow drop right arrow drop right circle outline arrow drop right square outline arrow drop right circle filled arrow drop right square filled arrow drop up arrow drop up circle outline arrow drop up square outline arrow drop up circle filled arrow drop up square filled arrow drop down arrow drop down circle outline arrow drop down square outline arrow drop down circle filled arrow drop down square filled pause pause circle outline pause square outline pause circle filled pause square filled check check circle outline check square outline check circle filled check square filled error error circle outline error square outline error circle filled error square filled info info circle outline info square outline info circle filled info square filled banned adjust menu bookmark caution radio button uncheck radio button check 3 dots horizontal 3 dots vertical first page last page first page filled last page filled download publish Retry wifi user user circle outline user square outline user circle filled user square filled camera calender clock outline clock filled Refresh credit card computer shut down home locked lock opened No lock magnifier location music cd player hour glass no sound sound copyright heart

More Icons…Coming Soon…



