Type anything, see everything.
Generative art with The Noun Project API.


  • The Noun Project API
  • Node.js
  • Express
  • Pixi.js
  • GreenSock
  • Bodymovin
  • Typeahead.js
Pictooptic is simple:
Type a word, and see a composition from icons depicting the word.
Icons and pictograms have the goal of unifying communication. However, they are subjectively understood and oftentimes have multiple meanings. A symbol meaning "peace" in Buddhism has the opposite meaning in western society.

Words can be charged with multiple meanings as well. A search for "palm" within Pictooptic will return a composition of trees, hands and religious icons. Icons strive to communicate directly to the subconscious but are ultimately subjective.
Pictooptic presents icons in a Rorschach-esque reflection. By abstracting icons through reflection we activate free-association within our creative mind. Within a search for "green" we may see the face of a boar emerge from the abstracted pattern. The icons for "green" will include frogs and leaves. It will also include conceptually related icons such as cars and lightbulbs.

These layers of abstraction stimulate passive creativity. It's subtly addictive like humming along to your favorite song.
All Icons and data in Pictooptic are sourced from The Noun Project. All icon designers are credited within the information page of each search result. All graphics and code of Pictooptic are in the Creative Commons.

Process info
Philip Bell
Front-End Developer
& Visual Designer
I blend bold visualization with code to create impactful digital experiences. I have 8+ years of digital design experience and my agency work includes Nike, Moet and Hennessy.

I hold a BFA from MICA in Graphic Design and I've enhanced this with workshops and courses including the Design Management class at Parsons and the Web Development Immersive program from General Assembly.

This combination of visual design and programming enables me to see projects holistically while building the details. I'm equally a thinker and a maker, with an emphasis on creation to push the needle forward.

Do you have an idea to build on?
Let's build it together.

Say Hello

Web Development

  • JavaScript ES6
  • CSS3
  • HTML5
  • Responsive Mobile Design

Web Technologies

  • React
  • Node.js
  • Pixi.js
  • A-Frame WebVR
  • Three.js

Motion Design

  • AfterEffects
  • CSS Animation
  • Web SVG Animation
  • Bodymovin

Digital Design

  • Illustrator
  • Photoshop
  • InDesign
  • Keynote

3D Design

  • Sketchup
  • Makerbot
  • Rhino
  • Paper Engineering