Icons for WAB

11038
8
09-09-2016 08:31 AM
PatrickMcKinney1
Occasional Contributor III

I wanted to share some websites I've found helpful in getting icons for WebApp Builder widgets and the loading screen.  Feel free to share other sites you use.

  • Font Awesome to PNG - Create a .png version of Font Awesome icons.  You can choose the color and size.
  • Loading.io - Create loading icons (gif, svg).  This is great for the loading screen icon when WAB first loads.
8 Replies
BlakeTerhune
MVP Regular Contributor

The Noun Project is also a good source for icons. There's also a surprising number of unicode characters that make good icons; search for them at &what.

PascualBenito
New Contributor III

I like this flat icon maker site. You can search by category or tags and then  customize the outline shape, color, fill, and size, before exporting image file:

Free Flat Icons - FlatIcons 

0 Kudos
BlakeTerhune
MVP Regular Contributor

Great resource, thanks for sharing. Their owl icon just looks like a guy with a huge beard.

0 Kudos
PascualBenito
New Contributor III

Hah! Yes, it looks like a little bearded gnome face!

Pascual Benito, PhD

Associate Engineer

Northgate Environmental Management, Inc.

428 13th Street, 4th Floor, Oakland, CA 94612

phone (510) 839-0688, ext. 225; mobile (510) 381-0304; fax (510) 839-4350

www.ngem.com

Certified Bay Area Green Business

CONFIDENTIALITY NOTICE:

This e-mail and its attachments from Northgate Environmental Management,

Inc. contain information that is confidential and/or privileged and is

intended for the sole use of the individual or entity named above. Any

disclosure, copying, distribution, dissemination, or use of this

information by any other person than the intended recipient is prohibited.

If you have received this e-mail in error, please notify the sender via

e-mail or by calling us at 510-839-0688

0 Kudos
by Anonymous User
Not applicable

I use Flaticon.com too >> Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of free icons 

Filter by mono-color > stroke (filled) and edit the icon. Replace the colour black with white. Download the icon in 128 pixels. Use it in your WAB app.

 

This is how it looks like in WAB.

ChristinaMcCullough
New Contributor III

This site has loads of white icons that can be used.  White icons - 4164 free white icons - Download white icons 

0 Kudos
KellySchon
New Contributor II

All these sites have some great resources, but how does everyone handle giving credit to the icon's original author? Within a web app I obviously can't list a credit right below the icon in the header, but I'm not sure where I'd place a link to a separate credits page elsewhere.

0 Kudos
BlakeTerhune
MVP Regular Contributor

We used the About widget and put all of the attribution in there.

ArcGIS Web Application