Providing a new generation of vector assets and infinite possibility for the interactive web and mobile applications
Switch branches/tags
Nothing to show
Clone or download

Foundry ∞

Providing a new generation of vector assets and infinite possibility for the interactive web and mobile applications

SVGs are amazing. Finding new and interactive ways to share visual information, art, and fun is awesome and SVGs let us do this in ways that aren’t possible in raster art.

Foundry is a new way of utilizing scalable vector graphics, giving designers the opportunity to contribute and collaborate on families of spot vector illustrations and icons and make them available for download/purchase. No more hunting around google for ten minutes to find just the right icon or wasting time recreating an iPhone when you know it’s already been done a thousand times.

How is this going to be different from existing art and icon libraries?

One of the most important aspects to the success of a project is focus. As with many existing libraries, they provide too much breadth and not enough depth. They have vector icons while, in the same breath, selling word press themes and business card templates. Many end up being filled with orphaned works, or arbitrary icon sets that are never updated, never improved, and never screened for quality. So too, to keep them versatile they offer their product in a generic format for whatever application.

Others are simply aggregation services. They act as a portal and by which independent sources can submit their icons. Because they are made by numerous independents, they are comprised almost exclusively of small, arbitrary sets that lack depth of content and inconsistent quality. Like having a font with one weight or only capitals, its usefulness is minimal as compared to a fully developed set that could be used throughout a brand, system, or application.

The distinction being that, like many of our products, it's a tool for professionals. Bourbon/Bitters, FormKeep and other front end tools created by thoughtbot are given focus and purpose with the basis that they are a set of tools for people looking to build web applications in the best way possible. This logic and focus could be carried over to Foundry. It's not a stock company, a theme forest, or an icon library. It’s another tool for making great web sites applications.

Who will contribute the illustrations and icons to Foundry?

With an initial seed of ~200 spot illustrations that exist as a cohesive set, named ‘Fellowly’. For the foreseeable future, contributors will be exclusively thoughtboters. Eventually each library will likely be its own repo, some open source, some not. This initial restriction will allow for the forming of an initial product vision around the kind of works to provide and the best way to maintain and deliver them. The biggest challenges of making icon or illustration sets is coherence. This project is also an experiment to see if and how a group of diverse artists can work together to create a cohesive yet diverse family of illustrations and icons.

What is the structure of these libraries?

Foundry's library architecture will be similar to that of a type foundry. As one foundry might have half a dozen font families, with weights and alternates within them, each foundry family can have a particular style, a set of goals, and potential applications. We could have a few established families or groups that are built out over time. Then, as the need and availability arises, more families will be added that blaze new territory in visual direction or theme.

Foundry Progress

A family of animated spinners, loaders and progress bars for Foundry ∞.

  • The icons are pure SVG, no javascript and CSS required
  • They are all 50x50 pixels, ensuring that you can swap one spinner out for another
  • The markup is easy to edit and follows thoughtbot's guides
  • The <svg> includes an id and class matching the filename, for targetting with CSS
  • The paths inside (<circle>, <rect>, <path>, etc) include a class shape to make styling even easier

How do I style the icons?

By adding something like this to your CSS:

.progress-006 {
  height: 25px;
  width: 25px;

.progress-006 .shape {
  fill: #C32F34;