Which tool ? What is your settings ? What is your workflow ? All steps from concept to export.
Concept: Brief > Research > Brainstorm > Rough sketch > Evaluate > Refine
Digitize: Setup the grid at intended use size > Draw possible shapes (circle, square, rectangle, etc) > Draw solid icons > Draw outlined icons > Adjust for next size if needed
Export: If I stick to the grid, nothing I should be worried about
Test: Test on all places intended to use the icons
Refine > Repeat
- Research existing concepts
- Pen and paper
- More pen and paper
- Rough designs in illustrator
- Print out, mark up any changes
- Refine in illustrator
- Present to client
- Save out SVGs
Never had a job that had enough icons to necessitate building an icon font. Seems like overkill most of the time, but I do websites not apps.
I use sites like iconmonstr & iconfinder to grasp what kind of metaphors to use. I then collect all the icons I want (in SVG format) and put them in a folder (I either design the icons myself or use/tweak ones from the sites listed above or the hundreds of free icon packs out there).
At that point, I use the command line tool Fontcustom to generate an icon font. You basically just put all the SVGs in a folder and point fontcustom at that folder. It then generates all the stuff you need (which you can configure). Then, anytime you tweak, add, or remove existing icons you just punch
fontcustom compilein the command line and it regenerates the icon fonts, sass partials, etc.
I commented on this exact thing in a previous thread...
I've been using a combination of gulp plugins to generate icon fonts from SVGs. My current workflow:
I drag and drop an SVG into a folder that gulp is listening to. Gulp starts processing the icon , and runs it through a lodash template. The final products are an SCSS file and relevant font files (e.g. EOT, SVG, TTF, WOFF).
I do this exact thing, however I am beginning to think of moving away from SVG -> Icon Font and just going straight inline-SVG.
This is definitely ideal. Unfortunately, the app I'm working on needs to support IE8... which doesn't play nice with inline SVGs.
We've also discovered that IE8 doesn't play nicely with pseudo-elements either. Namely, once a pseudo-element is drawn, it will never be repainted. Thus, hover effects aren't applied to icons from an icon font.
Our workaround is to use an angular directive that creates normal HTML elements from icons in an icon font. In the meantime, I just use the normal icon font when building prototypes.
Cool, that makes sense. Thankfully I don't have to support IE8 or really 9, although I do make sure everything works in 9.
When creating an icon family I would typically follow these steps:
- Sketch and explore motifs (floppy disk? down arrow? etc.)
- Define grid and rules (color coding, square vs round etc.)
- Refine sketches
- Execute (Photoshop/Illustrator/Sketch)
Google have some sweet tips here too.
Whenever I need an icon I typically conceptualize the 'style' or 'feel' I want from the surrounding context (for this reason I often design icons last and use placeholders during the design phase) and then get a feel for what types of shapes or objects I want to use. (i.e. Modern? Super geometric? Fancy? Desk objects?)
Then I'll maybe do a few sketches but I can't draw worth a damn so I just get down the general idea of the shape forms. Then I'll go into Illustrator (or right there in Sketch if it's simple enough) and start making some basic geometric shapes to block out the concept. Then I usually start chipping away, creating curves, shapes, and lines until I get what I want. Next I'll go back to the context and start trying different colors (if I haven't already decided).
Beyond that depends very highly on the situation. Sometimes icon fonts, but if there are only one or two on any given page I'll just go straight to a png and load it in via CSS.
By icon design process, I mean steps to create graphically those icons (with a grid setup on Illustrator, etc…).
As you can have on this article : https://medium.com/@dmiiiitri/fixing-icons-for-medium-8939ae05db85
Glyphs, iOS icons, Mac Icons, etc? What kind of icons?