Increase thickness of ion-icon - Urgent Please!


Hi All,

Please let me know how I can increase ion-icon thickness. I’m able to change the size by using font-size. Tried font-weight but did not work

I’m using arrow-forward and arrow-back.



@mhartington Does ionic has any function to increase the thickness of all available icon?. I had googled for almost 3-4 days but never found any options.


try in your css file ion-icon{ font-size: 34px}


You can use like @Ludolefrenchy say
using in scss

ion-icon {

or directly in html (not recommended)

<ion-icon style="font-size: 34px;" name="remove-circle" color="danger"></ion-icon>


I prefer to put everything in the css file in order not to overload the html file.
As you say @pettrin it’s not recommended in the html :wink:


Yes, you’re right :wink: !


Thanks for your response.

font-size does not change the thickness of the icon. font-size enlarge the size of icon


I wanted this to look thicker. Here the icon I have used is checkmark.


can give you the code you use.
thank you


Please find the code below

<ion-icon name="checkmark" [style.font-size]="'25px'"  [style.color]="'#00a300'"  ></ion-icon>

I wanted to increase the thickness of the checkmark so that coloring is visible.


Please let me know if this is possible