The icon property provides us with the ability to style any arbitrary element with an iconic equivalent. An element's icon is not used or rendered unless the content property is set to the value icon. Documents whose elements have icons assigned to them can be more easily viewed by users who find too much of text distracting. 


selector { 

    icon: auto | URL | initial | inherit;



The icon property takes these values: 

  • auto; This is the default value  and uses a default generic icon provided by the browser.
  • url; The value(s) in this property refer to one or more icons source in a comma delimited list. 
  • initialinherit

NOTE: The icon property at the moment of writing has been removed from CSS3.


The icon property example:


›› go to examples ››