Best practices for SVG icons

over 4 years ago from ivan volca, Product Designer @ BuzzFeed

  • Souvik MaitySouvik Maity, over 4 years ago

    I mostly use Adobe Illustrator when I have to create icons. While designing for websites: - I first create the icon in a 24x24 px canvas. - I convert all strokes & text to outlines (if any). - Resize them on a smaller artboard (5x5 px) and export them as svg. - After export, I run svg optimizer from terminal. - While coding, I use CSS to resize my svg icon based on design.

    Of course I use the artboard to export unless I am creating an animated svg icon. This way I ensure my site doesn't get heavy on file sizes.

    0 points