Frequently Asked Questions

<!doctype html> <html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> <head > <meta data-n-head="ssr" data-hid="charset" charset="utf-8"><meta data-n-head="ssr" data-hid="viewport" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" data-hid="title" name="title" content=" Frequently Asked Questions | Storyset"><meta data-n-head="ssr" data-hid="description" name="description" content="Check out our frequently asked questions"><title>Frequently Asked Questions | Storyset</title><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="ssr" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link data-n-head="ssr" rel="icon" href="/favicon.svg"><link data-n-head="ssr" rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png"><link data-n-head="ssr" rel="icon" type="image/png" size="16x16" href="/favicon-16x16.png"><link data-n-head="ssr" rel="manifest" href="/site.webmanifest"><link rel="preload" href="/_nuxt/acb11d4.js" as="script"><link rel="preload" href="/_nuxt/5c0e2af.js" as="script"><link rel="preload" href="/_nuxt/css/b1934df.css" as="style"><link rel="preload" href="/_nuxt/d7e9ad5.js" as="script"><link rel="preload" href="/_nuxt/css/63ddfe5.css" as="style"><link rel="preload" href="/_nuxt/ecbd288.js" as="script"><link rel="preload" href="/_nuxt/fonts/proxima-nova-bold.725bf99.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/_nuxt/fonts/proxima-nova-semibold.7353804.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/_nuxt/fonts/proxima-nova-regular.d828a5e.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/_nuxt/30b79e1.js" as="script"><link rel="stylesheet" href="/_nuxt/css/b1934df.css"><link rel="stylesheet" href="/_nuxt/css/63ddfe5.css"> </head> <body > <div data-server-rendered="true" id="__nuxt"><div id="__layout"><div><div class="bg-gray-100"><div class="vue-portal-target"></div> <header data-fetch-key="TopBar:0" class="bg-darkblue-500 sticky justify-between flex h-topbar px-4 items-center top-0 w-full z-40 transition-background duration-300"><div class="flex items-center"> <a href="/" class="nuxt-link-active"><img src="/images/logo.svg" alt="logo" class="h-8 sm:mr-4"></a></div> <div class="flex flex-1 justify-end"><div class="text-white sm:flex-1 flex items-center transition-all duration-200"><button aria-label="Search button" class="sm:hidden transition-opacity duration-200"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.966 56.966" width="512" height="512" class="search_svg__fill-current fill-current h-5 w-5"><path d="M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z"></path></svg></button> <div class="hidden lg:flex justify-center px-4"><nav class="hidden lg:flex items-center gap-4"><a href="/business" class="hidden sm:block text-gray-200 first-letter:capitalize hover:text-white">business </a><a href="/education" class="hidden sm:block text-gray-200 first-letter:capitalize hover:text-white">education </a><a href="/medical" class="hidden sm:block text-gray-200 first-letter:capitalize hover:text-white">medical </a><a href="/technology" class="hidden sm:block text-gray-200 first-letter:capitalize hover:text-white">technology </a><a href="/people" class="hidden sm:block text-gray-200 first-letter:capitalize hover:text-white">people </a><a href="/multi-purpose" class="hidden sm:block text-gray-200 first-letter:capitalize hover:text-white">multi-purpose </a></nav></div> <div class="absolute left-0 right-0 z-30 ml-12 mr-12 mt-3 sm:m-0 sm:relative sm:block flex-1 top-0 text-gray-800 hidden" data-v-0858fcf0><form data-v-0858fcf0><label data-v-0858fcf0><input name="q" id="search-input-topbar" type="search" placeholder="Search for an illustration" value="" class="appearance-none bg-darkblue-400 w-full flex-1 h-10 px-4 rounded focus:outline-none text-white" data-v-0858fcf0></label> <button class="sm:hidden absolute top-0 right-0 w-3 h-3 mt-4 mr-4 opacity-75" data-v-0858fcf0><svg viewBox="0 0 375 375" xmlns="http://www.w3.org/2000/svg" class="fill-current pointer-events-none" data-v-0858fcf0><g fill="#FFF" fill-rule="nonzero"><path d="M368.663 339.414L35.873 6.624c-8.076-8.076-21.172-8.076-29.249 0-8.076 8.077-8.076 21.173 0 29.25l332.79 332.79c8.078 8.076 21.172 8.076 29.25 0 8.076-8.078 8.076-21.172 0-29.25z"></path><path d="M339.414 6.624L6.624 339.414c-8.076 8.077-8.077 21.172 0 29.25 8.078 8.076 21.173 8.076 29.25 0l332.79-332.79c8.076-8.078 8.076-21.172 0-29.25-8.078-8.077-21.172-8.077-29.25 0z"></path></g></svg></button></form></div></div> <div class="w-12 sm:w-auto sm:flex-none justify-end flex items-center sm:px-4 gap-4 text-sm"><a href="/for-figma" class="hidden sm:block py-2 text-gray-200 hover:underline relative"><span> Plugin for Figma </span></a> <a href="/how-it-works" class="hidden sm:block py-2 text-gray-200 hover:underline"><span> How It Works </span></a> <div class="ml-2 cursor-pointer relative" data-v-4e1b577c><img src="/icons/menu.svg" alt="Menu icon" class="h-6 w-6" data-v-4e1b577c> <div class="dropdown absolute top-auto right-0 bg-white shadow-lg rounded py-3 mt-4 w-40 z-30" style="display:none;" data-v-4e1b577c data-v-4e1b577c><ul class="flex flex-col" data-v-4e1b577c><li class="text-right" data-v-4e1b577c><a href="/business" rel="noreferrer" class="block lg:hidden lock text-gray-700 hover:text-darkblue-500 first-letter:capitalize px-4 py-1 text-sm" data-v-4e1b577c> business </a></li><li class="text-right" data-v-4e1b577c><a href="/education" rel="noreferrer" class="block lg:hidden lock text-gray-700 hover:text-darkblue-500 first-letter:capitalize px-4 py-1 text-sm" data-v-4e1b577c> education </a></li><li class="text-right" data-v-4e1b577c><a href="/medical" rel="noreferrer" class="block lg:hidden lock text-gray-700 hover:text-darkblue-500 first-letter:capitalize px-4 py-1 text-sm" data-v-4e1b577c> medical </a></li><li class="text-right" data-v-4e1b577c><a href="/technology" rel="noreferrer" class="block lg:hidden lock text-gray-700 hover:text-darkblue-500 first-letter:capitalize px-4 py-1 text-sm" data-v-4e1b577c> technology </a></li><li class="text-right" data-v-4e1b577c><a href="/people" rel="noreferrer" class="block lg:hidden lock text-gray-700 hover:text-darkblue-500 first-letter:capitalize px-4 py-1 text-sm" data-v-4e1b577c> people </a></li><li class="text-right" data-v-4e1b577c><a href="/multi-purpose" rel="noreferrer" class="block lg:hidden lock text-gray-700 hover:text-darkblue-500 first-letter:capitalize px-4 py-1 text-sm" data-v-4e1b577c> multi-purpose </a></li> <li class="text-right" data-v-4e1b577c><a href="/how-it-works" class="block sm:hidden lock text-gray-700 hover:text-darkblue-500 px-4 py-1 text-sm" data-v-4e1b577c> How it works </a></li> <li class="text-right" data-v-4e1b577c><a href="/for-figma" class="block sm:hidden lock text-gray-700 hover:text-darkblue-500 px-4 py-1 text-sm" data-v-4e1b577c> Plugin for Figma </a></li> <li class="text-right" data-v-4e1b577c><a href="/faqs" aria-current="page" rel="noreferrer" class="block text-gray-700 hover:text-darkblue-500 px-4 py-1 text-sm nuxt-link-exact-active nuxt-link-active" data-v-4e1b577c> FAQs </a></li> <li class="text-right" data-v-4e1b577c><a rel="noreferrer" href="https://www.freepikcompany.com/privacy" target="_blank" class="block text-gray-700 hover:text-darkblue-500 px-4 py-1 text-sm" data-v-4e1b577c> Privacy policy </a></li> <li class="text-right" data-v-4e1b577c><a href="/terms" rel="noreferrer" class="block text-gray-700 hover:text-darkblue-500 px-4 py-1 text-sm" data-v-4e1b577c> Terms & Conditions </a></li> <li class="text-right" data-v-4e1b577c><a rel="noreferrer" href="https://www.freepikcompany.com/cookie" target="_blank" class="block text-gray-700 hover:text-darkblue-500 px-4 py-1 text-sm" data-v-4e1b577c>Cookies policy </a></li></ul></div></div></div></div></header> <div><div><div class="mt-header py-12 bg-white"><div class="static-page container mx-auto px-6"><h2 class="text-darkblue-500 text-3xl mb-8 font-semibold">Faqs</h2> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> How can I change the color of the illustrations? </h3> <p> It’s very easy. When you select an illustration, you’ll see at the top-right corner a button called “Change color”. Click on it and then choose a preset color, use the color picker or just enter your own RGB or Hex values. </p></div> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> Can I select different backgrounds in all illustration styles? If so, how? </h3> <p> Before selecting any illustration on the home page, depending on the style, you’ll see different options to choose from on the left side of the screen: </p> <ul class="mb-4 pl-2 list-disc"><li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Hidden:</strong> The background is removed (all four styles). </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Simple:</strong> A simple background is displayed (only Rafiki, Bro and Pana). </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Detailed:</strong> A more detailed background is displayed (only Rafiki and Pana). </li></ul> <p> You can also find these options on the right side of the screen after selecting any illustration. </p></div> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> Can I choose which elements of the illustrations I want to keep? </h3> <p> Absolutely! Every time you select an illustration, you’ll find a list of layers on the right side of the screen. These layers correspond with the different elements of the illustration, which means you can pick the ones you want to keep and discard those you don’t need. To hide any element, just click on the eye next to its name on the list. Similarly, to unhide it, just click on the eye again. </p></div> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> How can I animate the illustrations? </h3> <p class="text-gray-700 leading-normal mb-2"> After selecting an illustration, a button called “Animate it” will appear at the top-right corner of the screen. If you click on it, you’ll access the animation panel, where you can select any of the elements of the illustration and apply different animations to them. Here’s a comprehensive list: </p> <h4 class="font-bold text-gray-800 leading-normal mb-2">ENTRANCE</h4> <ul class="mb-4 pl-2 list-disc"><li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Fade In:</strong> The element appears gradually on the screen. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Slide Up:</strong> The element appears on the screen while sliding upward. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Slide Down:</strong> The element appears on the screen while sliding downward. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Slide Left:</strong> The element appears on the screen while sliding from the left side. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Slide Right:</strong> The element appears on the screen while sliding from the right side. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Zoom In:</strong> The element appears on the screen while growing in size. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Zoom Out:</strong> The element appears on the screen while shrinking. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Light Left:</strong> The element enters from the left side, brakes and stays in place. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Light Right:</strong> The element enters from the right side, brakes and stays in place. </li></ul> <h4 class="font-bold text-gray-800 leading-normal mb-2">LOOPING</h4> <ul class="mb-4 pl-2 list-disc"><li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Shake:</strong> The element looks as if it were shaking. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Spin:</strong> The element spins in place clockwise. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Floating:</strong> The element looks as if it were floating up and down. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Heartbeat:</strong> The element grows and shrinks, mimicking a heartbeat. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Wind:</strong> The element moves slightly to the sides as if it were being blown by the wind. </li></ul> <p class="text-gray-700 leading-normal mb-2"> You can also adjust some settings to further customize these animations: </p> <ul class="mb-4 pl-2 list-disc"><li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Easing (only for ENTRANCE animations):</strong> Here you can select which kind of easing you want for the animation. </li> <ul class="ml-4"><li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Toon:</strong> The element overshoots a bit and then goes back to normal. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Linear:</strong> The animation looks uniform for the entire duration. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Ease-in:</strong> The animation begins slowly and then picks up speed. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Ease-out:</strong> The animation slows down at the end. </li></ul> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Duration:</strong> Here you can set the duration in seconds by using the slider or entering your own value. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Delay:</strong> Here you can set how many seconds must pass before the animation begins. </li> <li class="text-gray-700 leading-normal mb-2"><strong class="text-darkblue-500 mr-1">Animate children (only for ENTRANCE animations):</strong> Check this box if you want the different parts of the selected element to be animated individually, which means they will appear on the screen at different times. </li></ul> <p class="text-gray-700 leading-normal mb-2"> If you’re not sure which ones you should pick, you can always click on “Randomize!” to generate a random set of animations for the different elements of the illustration. Finally, to remove all the animations, just click on “Reset”. </p></div> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> When downloading illustrations, which file formats are available? </h3> <p class="text-gray-700 leading-normal mb-2"> All our illustrations can be downloaded as SVG or PNG files. The former are fully editable, supported by most browsers and can be converted to shapes due to their vector nature, whereas the latter have a good compression rate, more color depth and support transparency. </p> <p class="text-gray-700 leading-normal mb-2"> On the other hand, animations can be downloaded as an HTML file to use on your site with inline SVG and CSS. They can also be exported as a GIF or an MP4 video, allowing you to select the size and the background color to adapt it to your project. </p> <p class="text-gray-700 leading-normal mb-2"> Please note that it’s not possible to export an animation as a GIF or an MP4 video containing both entrance and looping effects at the same time. If you need both types, you must export it twice: one with entrance effects and another with looping effects. </p></div> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> Do I have to add attribution to Storyset whenever I use the illustrations? </h3> <p class="text-gray-700 leading-normal mb-2"> Yes, you must always include the attribution to Storyset every time you use our free illustrations or <a href="https://www.flaticon.com/pricing" target="_blank" class="text-blue-500 underline">get a premium license from Flaticon</a> to enjoy unlimited resources without attribution. </p></div> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> Can I modify the illustrations after downloading them? </h3> <p class="text-gray-700 leading-normal mb-2"> Yes. Whenever you download our illustrations in SVG format, you will be able to edit them with any vector graphics editor program. </p></div> <div class="mb-12"><h3 class="font-bold text-gray-800 text-xl leading-normal mb-4"> I can’t find an answer for my question here. What else can I do? </h3> <p class="text-gray-700 leading-normal mb-2"> If you have any question and you can’t find an answer in these FAQs, please email us at <a href="/cdn-cgi/l/email-protection#2f5c5a5f5f405d5b6f495d4a4a5f4644014c4042" class="text-blue-500 underline"><span class="__cf_email__" data-cfemail="d6a5a3a6a6b9a4a296b0a4b3b3a6bfbdf8b5b9bb">[email protected]</span></a> and we’ll help you. </p></div></div></div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","logo":"https://storyset.com/images/logo.svg","name":"Storyset","url":"https://storyset.com/"}</script> <script type="application/ld+json">{"@context":"https://schema.org/","@type":"WebSite","name":"Storyset","url":"https://storyset.com/","potentialAction":{"@type":"SearchAction","target":"https://storyset.com/search?q={search_term_string}","query-input":"required name=search_term_string"}}</script> <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Do I have to add attribution to Storyset whenever I use the illustrations?","acceptedAnswer":{"@type":"Answer","text":"Yes, you must always include the attribution to Storyset every time you use our free illustrations or get a premium license from Flaticon to enjoy unlimited resources without attribution."}},{"@type":"Question","name":"Can I modify the illustrations after downloading them?","acceptedAnswer":{"@type":"Answer","text":"Yes. Whenever you download our illustrations in SVG format, you will be able to edit them with any vector graphics editor program."}}]}</script></div></div>  <div class="sm:hidden fixed bottom-0 right-0 w-10 h-10 bg-darkblue-500 mr-4 mb-4 rounded flex items-center justify-center shadow text-white transform -rotate-90 transition-opacity duration-200 opacity-0 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-49 141 512 512" class="fill-current h-4 w-4"><path d="M262.145 397L98.822 560.323c-9.763 9.763-9.763 25.592 0 35.355 9.764 9.763 25.592 9.763 35.355 0l181-181c4.882-4.881 7.323-11.279 7.323-17.677s-2.441-12.796-7.322-17.678l-181-181c-9.764-9.763-25.592-9.763-35.355 0s-9.763 25.592 0 35.355L262.145 397z"></path></svg></div></div> <footer><div class="container mx-auto px-6"><div class="flex flex-col sm:flex-row items-center"><div class="mb-8 sm:mb-0 w-full sm:w-1/2 flex flex-col items-start"><img src="/images/logo-footer.svg" alt="Storyset" class="h-8 lg:h-10"></div> <div class="flex sm:inline-flex w-full sm:w-auto"><div class="w-1/2"><p class="uppercase text-xl mb-4 font-bold text-darkblue-500">Top tags</p> <ul class="p-0 sm:flex flex-wrap text-gray-700 text-base"></ul></div> <div class="w-1/2"><p class="uppercase text-xl mb-4 font-bold text-darkblue-500">Help</p> <ul class="p-0 sm:flex flex-wrap text-gray-700 text-base"><li class="mb-3 sm:w-1/2"><a href="/faqs" aria-current="page" class="hover:underline nuxt-link-exact-active nuxt-link-active">FAQs</a></li> <li class="mb-3 sm:w-1/2"><a href="/terms" class="hover:underline">Terms & Conditions</a></li> <li class="mb-3 sm:w-1/2"><a href="https://www.freepikcompany.com/privacy" target="_blank" rel="noreferrer" class="hover:underline"> Privacy Policy </a></li> <li class="mb-3 sm:w-1/2"><a href="https://www.freepikcompany.com/cookie" target="_blank" rel="noreferrer" class="hover:underline"> Cookies Policy </a></li> <li class="mb-3 sm:w-1/2"><a href="/for-figma" target="_blank" class="hover:underline"> Plugin for Figma </a></li></ul></div></div></div></div> <div class="freepik-project py-8 bg-darkblue-400 mt-16"><div class="container mx-auto px-6 text-center flex items-center justify-between"><div class="flex flex-col justify-center items-center sm:flex-row sm:items-center items-center"><img src="/images/freepikcompany.svg" alt="Freepik Company" class="h-5 my-1"> <p class="opacity-75 leading-normal text-white ml-4"> Copyright ©2022 Freepik Company S.L. All rights reserved. </p></div></div></div></footer></div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g){return {layout:"withfooter",data:[{}],fetch:{"TopBar:0":{inputVisible:false,tags:[{name:a,slug:a},{name:b,slug:b},{name:c,slug:c},{name:d,slug:d},{name:e,slug:e},{name:f,slug:f}]}},error:g,serverRendered:true,routePath:"\u002Ffaqs",config:{_app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:g}}}}("business","education","medical","technology","people","multi-purpose",null));</script><script src="/_nuxt/acb11d4.js" defer></script><script src="/_nuxt/30b79e1.js" defer></script><script src="/_nuxt/5c0e2af.js" defer></script><script src="/_nuxt/d7e9ad5.js" defer></script><script src="/_nuxt/ecbd288.js" defer></script> </body> </html>

CINXE.COM

Frequently Asked Questions | Storyset