https://thenounproject.com/_next/static/chunks/pages/developers/api-documentation-a6136ffd6ea85a8e.js

1try{let e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="075eefc0-cbf0-4f6a-8161-4e0e67742de5",e._sentryDebugIdIdentifier="sentry-dbid-075eefc0-cbf0-4f6a-8161-4e0e67742de5")}catch(e){}(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6613],{95627:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return J}});var r=n(67294),a=n(49507),i=n(82032),l=n(99327),o=n(55717),s=n(35844),c=n(10452),d=n(68188),m=()=>r.createElement(s.Z,{topSpacing:"2xl",bottomSpacing:"xl"},r.createElement(c.Z,{type:"h2",size:"xl",bottomSpacing:"lg"},"Noun Project Icon API Developer Documentation"),r.createElement(d.Z,{type:"p",size:"xl"},"Noun Project's PNG and SVG Icon API is built for quick, easy, reliable technical integration into your app or website. Our REST API is built on AWS and secured with OAuth, and includes extensive features for icon search and download, plus many ways to customize your integration by icon style, color, format, subject matter, and much more.")),u=n(87583),p=n(89647),f=n(5183);n(67602),n(41792);var h=n(35246),g=n(51384);let y=u.ZP.nav.withConfig({displayName:"NavListLinks__NavListLinksStyled",componentId:"sc-1y7sqau-0"})(["padding:",";ul{padding-left:",";li{list-style-type:disc;a{display:inline;}}}"],(0,g.Mr)(12),(0,g.Mr)(12));var b=({links:e})=>r.createElement(y,null,r.createElement("ul",null,e.map(({id:e,href:t,text:n,target:a="_self"})=>r.createElement("li",{key:e},r.createElement(h.Z,{href:t,target:a,size:"lg"},n))))),x=n(27951),w=n(99008),E=n(25153);let _=u.ZP.div.withConfig({displayName:"CTABlocks__CTABlocksStyled",componentId:"sc-1lfp3z2-0"})(["display:flex;gap:",";@media (max-width:","){flex-direction:column;}"],(0,g.Mr)(24),E.Z.tablet.rem),k=u.ZP.div.withConfig({displayName:"CTABlocks__CTABlockStyled",componentId:"sc-1lfp3z2-1"})(["flex:1;display:flex;flex-direction:column;border:1px solid ",";padding:",";"],w.default.primary.scheifer,(0,g.Mr)(24)),v=u.ZP.div.withConfig({displayName:"CTABlocks__ContentWrapperStyled",componentId:"sc-1lfp3z2-2"})(["flex:0;margin:"," 0;@media (min-width:","){flex:1;}"],(0,g.Mr)(24),E.Z.tablet.rem),S=e=>[{id:1,text:"Create a key",href:`${e}/getting_started.html#creating-an-api-key`,target:"_blank"},{id:2,text:"Authentication",href:`${e}/getting_started.html#authentication`,target:"_blank"},{id:3,text:"Making requests",href:`${e}/getting_started.html#making-requests`,target:"_blank"},{id:4,text:"Supported formats & responses",href:`${e}/getting_started.html#supported-file-formats-and-http-responses`,target:"_blank"},{id:5,text:"Unacceptable uses",href:`${e}/getting_started.html#unacceptable-uses`,target:"_blank"},{id:6,text:"Sample code",href:`${e}/getting_started.html#sample-code`,target:"_blank"},{id:7,text:"Notes on style filtering",href:`${e}/getting_started.html#icon-style-filtering`,target:"_blank"}],I=e=>[{id:1,text:"Search and filter icons",href:`${e}/documentation.html#search-and-filter-icons`,target:"_blank"},{id:2,text:"Get an icon",href:`${e}/documentation.html#get-an-icon`,target:"_blank"},{id:3,text:"Specify color, size, file type",href:`${e}/documentation.html#specify-color-size-and-file-type`,target:"_blank"},{id:4,text:"Find icons with matching visual style",href:`${e}/documentation.html#find-similar-icons`,target:"_blank"},{id:5,text:"Search Icon Collections (Icon Sets)",href:`${e}/documentation.html#search-icon-collections-icon-sets`,target:"_blank"},{id:6,text:"Blacklist / blockcontent",href:`${e}/documentation.html#blacklist-block-content`,target:"_blank"}],N=({children:e,title:t,cta:{url:n,buttonText:a}})=>r.createElement(k,null,r.createElement(c.Z,{type:"h3",size:"xs"},t),r.createElement(v,null,e),r.createElement("div",null,r.createElement(f.Z,{href:n,width:"100%",target:"_blank"},a)));var P=()=>{let{nounApiUrlPublic:e}=(0,p.v9)(x.iE),t=e||"https://api.thenounproject.com",n=(0,r.useMemo)(()=>S(t),[t]),a=(0,r.useMemo)(()=>I(t),[t]);return r.createElement(s.Z,{topSpacing:"none",bottomSpacing:"3xl"},r.createElement(_,null,r.createElement(N,{title:"Developers' Get Started Guide",cta:{url:`${t}/index.html`,buttonText:"See Full Guide"}},r.createElement(b,{links:n})),r.createElement(N,{title:"API Documentation",cta:{url:`${t}/documentation.html`,buttonText:"All API Documentation"}},r.createElement(b,{links:a})),r.createElement(N,{title:"Noun Project API Explorer",cta:{url:`${t}/explorer`,buttonText:"Try it Out"}},r.createElement(d.Z,{type:"p",size:"lg"},"The Noun Project Icon API Explorer is a handy way to try out API endpoints before integrating with your code. See all endpoints, view query parameters, generate request URLs for your co

1de, and review operation responses in real time."))))};n(30005);var C=n(90678),$=n(3701);let Z=u.ZP.div.withConfig({displayName:"Ornaments__DisplayNumberBackgroundStyled",componentId:"sc-1negzw7-0"})(["font-size:",";line-height:100%;color:",";opacity:0.1;position:absolute;bottom:-",";right:",";",";"],(0,g.Mr)(155),w.default.functional.secondary.parrot,(0,g.Mr)(26),(0,g.Mr)(14),C.Se),A=u.ZP.div.withConfig({displayName:"Ornaments__CircleStyled",componentId:"sc-1negzw7-1"})(["border-radius:50%;width:",";height:",";background:",";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);"],(0,g.Mr)(16),(0,g.Mr)(16),w.default.primary.scheifer),z=(0,u.ZP)($.Z).withConfig({displayName:"Ornaments__ArrowStyled",componentId:"sc-1negzw7-2"})(["position:absolute;top:50%;transform:translateY(-50%);left:-24px;@media (max-width:","){top:-",";left:50%;transform:translateX(-50%) rotate(90deg);}"],E.Z.beforeTablet.rem,(0,g.Mr)(22));var M=({displayNumber:e,showIncomingArrow:t=!0,showOutgoingCircle:n=!0})=>r.createElement(r.Fragment,null,r.createElement(Z,{"aria-hidden":"true"},e),n&&r.createElement(A,{"aria-hidden":"true","data-anchor":`step-${e}-out`}),t&&r.createElement(z,{size:"lg",fillColor:w.default.primary.scheifer,"aria-hidden":"true","data-anchor":`step-${e}-in`}));let T=u.ZP.div.withConfig({displayName:"StepCard__StepStyled",componentId:"sc-8otq4u-0"})(["flex:0 0 calc(50% - ",");position:relative;border:1px solid ",";background:",";padding:",";display:flex;flex-direction:column;gap:",";@media (min-width:","){transform:",";}@media (max-width:","){margin-bottom:",";&:last-child{margin-bottom:0;}}",""],(0,g.Mr)(32),w.default.primary.scheifer,w.default.primary.snow,(0,g.Mr)(32),(0,g.Mr)(16),E.Z.tablet.rem,({isEven:e,offset:t})=>e?`translateY(${(0,g.Mr)(t)})`:"none",E.Z.beforeTablet.rem,(0,g.Mr)(54),({isOdd:e})=>e&&(0,u.iv)(["@media (min-width:","){","{left:auto;right:-24px;transform:translateY(-50%) scaleX(-1);}}"],E.Z.tablet.rem,z)),G=(0,u.ZP)(d.Z).withConfig({displayName:"StepCard__StepDisplayNumberStyled",componentId:"sc-8otq4u-1"})(["",";text-transform:uppercase;"],C.oN);var j=({step:e,index:t,offset:n,isFirst:a,isLast:i})=>{let{displayNumber:l,title:o,text:s}=e;return r.createElement(T,{isEven:t%2==1,offset:n,isOdd:t%2==0},r.createElement(M,{displayNumber:l,showIncomingArrow:!a,showOutgoingCircle:!i}),r.createElement(G,{type:"div",size:"xs"},"Step ",l),r.createElement(c.Z,{type:"h3",size:"xs"},o),r.createElement(d.Z,{type:"p",size:"lg"},s))};let L=e=>e.slice(0,-1).map((t,n)=>[`step-${t.displayNumber}-out`,`step-${e[n+1].displayNumber}-in`]),q=(e,t)=>{let n=e.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:n.left+n.width/2-r.left,y:n.top+n.height/2-r.top}},D=(e,t,n=24)=>{let r=t.x>e.x?1:-1,a=t.y>e.y?1:-1,i=t.y;return`
2        M ${e.x} ${e.y}
3        L ${e.x} ${i-n*a}
4        Q ${e.x} ${i}, ${e.x+n*r} ${i}
5        L ${t.x} ${i}
6    `},F=(e,t)=>`
7        M ${e.x} ${e.y}
8        L ${t.x} ${t.y}
9    `,O=u.ZP.div.withConfig({displayName:"StepsContainer__StepsContainerStyled",componentId:"sc-1p7fc9j-0"})(["position:relative;"]),R=u.ZP.svg.withConfig({displayName:"StepsContainer__ConnectorSvgStyled",componentId:"sc-1p7fc9j-1"})(["position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;"]),B=u.ZP.div.withConfig({displayName:"StepsContainer__StepsStyled",componentId:"sc-1p7fc9j-2"})(["position:relative;z-index:1;@media (min-width:","){display:flex;flex-wrap:wrap;align-items:flex-start;gap:"," ",";padding-bottom:",";}"],E.Z.tablet.rem,({verticalGap:e})=>(0,g.Mr)(e),({horizontalGap:e})=>(0,g.Mr)(e),({offset:e})=>(0,g.Mr)(e));var X=({steps:e,offset:t,verticalGap:n,horizontalGap:a,cornerRadius:i})=>{let l=(0,r.useRef)(null),o=(0,r.useRef)(null),s=(0,r.useMemo)(()=>L(e),[e]),c=()=>{let e=l.current,t=o.current;if(!e||!t)return;for(;t.firstChild;)t.removeChild(t.firstChild);let n=window.innerWidth<768;s.forEach(([r,a])=>{let l=e.querySelector(`[data-anchor="${r}"]`),o=e.querySelector(`[data-anchor="${a}"]`);if(!l||!o)return;let s=q(l,e),c=q(o,e),d=document.createElementNS("http://www.w3.org/2000/svg","path"),m=n?F(s,c):D(s,c,i);d.setAttribute("d",m),d.setAttribute("fill","none"),d.setAttribute("stroke",w.default.primary.scheifer),d.setAttribute("stroke-width","2"),d.setAttribute("stroke-dasharray","4 4"),d.setAttribute("stroke-linecap","round"),d.setAttribute("stroke-linejoin","round"),t.appendChild(d)})};return(0,r.useEffect)(()=>{c();let e=l.current;if(!e)return;let t=new ResizeObserver(()=>{c()});t.observe(e);let n=()=>{c()};

9return window.addEventListener("resize",n),()=>{t.disconnect(),window.removeEventListener("resize",n)}},[e,i,s]),r.createElement(O,{ref:l},r.createElement(R,{ref:o}),r.createElement(B,{verticalGap:n,horizontalGap:a,offset:t},e.map((n,a)=>r.createElement(j,{key:n.displayNumber,step:n,index:a,offset:t,isFirst:0===a,isLast:a===e.length-1}))))},Y=({steps:e,config:t})=>{let{offset:n=200,verticalGap:a=150,horizontalGap:i=64,cornerRadius:l=24}=t||{};return r.createElement(X,{steps:e,offset:n,verticalGap:a,horizontalGap:i,cornerRadius:l})},U=n(1599);let V=[{displayNumber:"01",title:"Make a Noun Project Account",text:r.createElement(r.Fragment,null,"If you haven't already, create or sign in to a Noun Project account. That's all you need to have in place in order to create a free API key!")},{displayNumber:"02",title:"Generate Your Icon API Key",text:r.createElement(r.Fragment,null,"Go to your"," ",r.createElement(h.Z,{href:l.PS,target:"_self"},"API dashboard")," ",'and click the "Create New Key" button. Enter some basic info and submit the form to generate the key — no payment or credit card required.')},{displayNumber:"03",title:"Explore API Endpoints",text:r.createElement(r.Fragment,null,"Use your key with the"," ",r.createElement(h.Z,{href:"https://api.thenounproject.com/explorer",target:"_blank"},"Noun Project API Explorer")," ","to try out features without writing a single line of code! See calls and responses for icon search, finding matching styles, specifying colors, downloading in SVG or PNG, and more.")},{displayNumber:"04",title:"Integrate the Full Icon Library, Free",text:r.createElement(r.Fragment,null,"Integrate with your code for free - no credit card required, no strings attached. Your first ",U.R," days or $5 in value are on us. Access millions of icons and icon sets in thousands of styles.")}];var W=()=>r.createElement(s.Z,{topSpacing:"2xl",bottomSpacing:"3xl",bgColor:w.default.primary.diamond},r.createElement(c.Z,{type:"h2",size:"xl",alignment:"center",bottomSpacing:"xl"},"How to Get Started"),r.createElement(Y,{steps:V})),K=()=>r.createElement(o.Z,null,r.createElement(m,null),r.createElement(P,null),r.createElement(W,null));let H=`Easily integrate ${i.LP} million icons via REST API. Search, filter, and download PNG & SVG icons by style, color, & size. Free API key, no credit card required.`,Q=i.NE+l.B9;var J=()=>r.createElement(r.Fragment,null,r.createElement(a.Z,{title:"Icon API Documentation & Developer Guide | Noun Project",description:H,indexContent:"index,follow,max-image-preview:large",canonicalURL:Q}),r.createElement(K,null))},73661:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/developers/api-documentation",function(){return n(95627)}])}},function(e){e.O(0,[4593,1664,8078,2888,9774,179],function(){return e(e.s=73661)}),_N_E=e.O()}]);