Title: Tech Blog: Bring your own icon to life with CSS | Genio URL Source: https://genio.co/blog/bring-an-icon-to-life-with-css Published Time: 2023-04-17T23:00:00.000Z Markdown Content: # Tech Blog: Bring your own icon to life with CSS | Genio [Skip to main menu](https://genio.co/blog/bring-an-icon-to-life-with-css#main-menu)[Skip to footer](https://genio.co/blog/bring-an-icon-to-life-with-css#footer) * [Sign in](https://app.genio.co/account/sign-in) * [Get started for free](https://genio.co/pricing/get-genio-free) * [Activate a licence](https://app.genio.co/notes/activate)Activate a licence [](https://genio.co/)Genio logo - home * Products * Pricing * Resources * About Genio [Watch a demo](https://genio.co/watch-demo) [Genio Notes](https://genio.co/notes)Genio Notes ![Image 2: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Genio Notes The #1 note taking solution to boost knowledge, skills and confidence [The Confident Notetaker's Masterclass](https://genio.co/the-confident-notetakers-masterclass)The Confident Notetaker's Masterclass ![Image 3: The Confident Notetaker's Masterclass icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_studying%20mh%20challenge.svg) The Confident Notetaker's Masterclass An on-demand online note taking course that helps you prepare for your studies [Genio Present](https://genio.co/present)Genio Present ![Image 4: Genio Present icon](https://genio.co/hubfs/website/vectors/menu-icons/present%20icon.png) Genio Present Our brand new tool to reduce presentation anxiety and build lasting communication skills Enter search term Search [Genio for institutions](https://genio.co/solutions/institutions)Genio for institutions ![Image 5: Implement Genio in your institution icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_higher%20ed.svg) Genio for institutions Learn why over 1,000 institutions around the world choose Genio [Genio for students](https://genio.co/solutions/students)Genio for students ![Image 6: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Genio for students Over 160,000 students are using Genio tools to unlock better learning [Recommend Genio](https://genio.co/resources/assessors-toolkit)Recommend Genio ![Image 7: Recommend Genio in needs assessments icon](https://genio.co/hubfs/website/vectors/menu-icons/recommend-glean-icon.svg) Recommend Genio Confidently demonstrate and recommend Genio's solutions [Why choose Genio](https://genio.co/solutions/why-choose-genio)Why choose Genio ![Image 8: Genio website favicon 300x300-1](https://genio.co/hubfs/Genio%20website%20favicon%20300x300-1.svg) Why choose Genio Explore all the reasons Genio is the #1 note taking solution to boost knowledge, skills and confidence [Packages for institutions](https://genio.co/pricing/institutions)Packages for institutions ![Image 9: roi-calculator-icon](https://genio.co/hubfs/website/vectors/menu-icons/roi-calculator-icon.svg) Packages for institutions Explore our packages and provide Genio Notes for students [Individual plans for students](https://genio.co/pricing/individuals)Individual plans for students ![Image 10: Individual plans for students icon](https://genio.co/hubfs/website/vectors/menu-icons/icon_individual%20pricing.png) Individual plans for students Purchase a Genio Notes subscription for your studies or on behalf of someone else [Get Genio Notes free](https://genio.co/pricing/get-genio-free)Get Genio Notes free ![Image 11: icon_get genio free](https://genio.co/hubfs/website/vectors/menu-icons/icon_get%20genio%20free.png) Get Genio Notes free Find out if you can get Genio Notes through government programs or your institution Enter search term Search [Institution Wide](https://genio.co/pricing/institution-wide)Institution Wide ![Image 12: Institution Wide icon](https://genio.co/hubfs/website/vectors/menu-icons/faculty-support-icon.svg) Institution Wide Drive student engagement and retention at your institution [ROI calculator](https://genio.co/resources/roi-calculator)ROI calculator ![Image 13: ROI calculator icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_balancing%20work.svg) ROI calculator See how much you could save by improving retention and persistence with Genio Notes [Request a demo account](https://genio.co/solutions/recommend-genio/demonstrator-account)Request a demo account ![Image 14: Request a demo account icon](https://genio.co/hubfs/website/vectors/menu-icons/tool-for-admins-icon.svg) Request a demo account [Activate a Genio Notes licence](https://app.genio.co/notes/activate)Activate a Genio Notes licence ![Image 15: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Activate a Genio Notes licence ###### Explore [Product and feature guides](https://genio.co/resources/product-and-feature-guides)Product and feature guides ![Image 16: Product and feature guides icon](https://genio.co/hubfs/website/vectors/menu-icons/video_guides-icon-01.svg) Product and feature guides [Learner support and retention](https://genio.co/resources/learner-support-and-retention)Learner support and retention ![Image 17: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Learner support and retention [Recommend Genio in needs assessments](https://genio.co/resources/assessors-toolkit)Recommend Genio in needs assessments ![Image 18: Recommend Genio in needs assessments icon](https://genio.co/hubfs/website/vectors/menu-icons/recommend-glean-icon.svg) Recommend Genio in needs assessments [Tips and advice for students](https://genio.co/resources/tips-and-advice-for-students)Tips and advice for students ![Image 19: Tips and advice for students icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_learning%20accessible.svg) Tips and advice for students [Implement Genio in your institution](https://genio.co/resources/implement-genio)Implement Genio in your institution ![Image 20: Implement Genio in your institution icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_higher%20ed.svg) Implement Genio in your institution [Accessibility and compliance](https://genio.co/resources/compliance-and-accessibility)Accessibility and compliance ![Image 21: Accessibility and compliance icon](https://genio.co/hubfs/website/vectors/menu-icons/it-icon.svg) Accessibility and compliance [Genio AI Hub](https://genio.co/ai-hub)Genio AI Hub ![Image 22: Genio AI Hub](https://genio.co/hubfs/website/vectors/menu-icons/about-us-icon.svg) Genio AI Hub [Support for STEM students](https://genio.co/notes/stem-study-support-tools)Support for STEM students ![Image 23: roi-calculator-icon](https://genio.co/hubfs/website/vectors/menu-icons/roi-calculator-icon.svg) Support for STEM students Enter search term Search ###### Browse [Events and webinars](https://genio.co/resources/events-and-webinars)Events and webinars ![Image 24: Events and webinars icon](https://genio.co/hubfs/website/vectors/menu-icons/events-icon.svg) Events and webinars [Case studies and user stories](https://genio.co/resources/case-studies-and-user-stories)Case studies and user stories ![Image 25: Case studies and user stories icon](https://genio.co/hubfs/website/vectors/menu-icons/case-studies-icon.svg) Case studies and user stories [Blog](https://genio.co/blog)Blog ![Image 26: Blog icon](https://genio.co/hubfs/website/vectors/menu-icons/blog-icon.svg) Blog [Research and insights](https://genio.co/resources/research-and-insights)Research and insights ![Image 27: Our Brand Story icon](https://genio.co/hubfs/website/vectors/menu-icons/guides-icon.svg) Research and insights [Help center](https://help.genio.co/)Help center ![Image 28: Help center icon](https://genio.co/hubfs/website/vectors/menu-icons/customer-support-icon.svg) Help center [Genio Podcast: Learning Outcomes Leaders](https://genio.co/resources/learning-outcomes-leaders-podcast)Genio Podcast: Learning Outcomes Leaders ![Image 29: Genio Podcast: Learning Outcomes Leaders](https://genio.co/hubfs/mic.png) Genio Podcast: Learning Outcomes Leaders [About us](https://genio.co/about)About us ![Image 30: About us icon](https://genio.co/hubfs/Genio%20website%20favicon%20300x300.svg) About us [Careers](https://genio.co/about/careers)Careers ![Image 31: Careers icon](https://genio.co/hubfs/website/vectors/menu-icons/careers-icon.svg) Careers [Research Accreditation Hub](https://genio.co/about/research-accreditation-hub)Research Accreditation Hub ![Image 32: Research Accreditation Hub icon](https://genio.co/hubfs/website/vectors/menu-icons/icon_research%20accreditations.png) Research Accreditation Hub [Our Brand Story](https://genio.co/about/our-brand-story)Our Brand Story ![Image 33: Our Brand Story icon](https://genio.co/hubfs/website/vectors/menu-icons/guides-icon.svg) Our Brand Story [Life at Genio](https://genio.co/about/careers/life-at-genio)Life at Genio ![Image 34: Life at Genio icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_faculty%20staff.svg) Life at Genio [Contact us](https://genio.co/contact)Contact us ![Image 35: Contact us icon](https://genio.co/hubfs/website/vectors/menu-icons/contact-us-icon.svg) Contact us Enter search term Search [Home](https://genio.co/) * [Sign in](https://app.genio.co/account/sign-in) * [Get started for free](https://genio.co/pricing/get-genio-free) * [Activate a licence](https://app.genio.co/notes/activate) * [Watch a demo](https://genio.co/watch-demo) Enter search term Search * Products * [Genio Notes](https://genio.co/notes)Genio Notes![Image 36: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Genio Notes The #1 note taking solution to boost knowledge, skills and confidence [The Confident Notetaker's Masterclass](https://genio.co/the-confident-notetakers-masterclass)The Confident Notetaker's Masterclass![Image 37: The Confident Notetaker's Masterclass icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_studying%20mh%20challenge.svg) The Confident Notetaker's Masterclass An on-demand online note taking course that helps you prepare for your studies [Genio Present](https://genio.co/present)Genio Present![Image 38: Genio Present icon](https://genio.co/hubfs/website/vectors/menu-icons/present%20icon.png) Genio Present Our brand new tool to reduce presentation anxiety and build lasting communication skills * [Genio for institutions](https://genio.co/solutions/institutions)Genio for institutions![Image 39: Implement Genio in your institution icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_higher%20ed.svg) Genio for institutions Learn why over 1,000 institutions around the world choose Genio [Genio for students](https://genio.co/solutions/students)Genio for students![Image 40: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Genio for students Over 160,000 students are using Genio tools to unlock better learning [Recommend Genio](https://genio.co/resources/assessors-toolkit)Recommend Genio![Image 41: Recommend Genio in needs assessments icon](https://genio.co/hubfs/website/vectors/menu-icons/recommend-glean-icon.svg) Recommend Genio Confidently demonstrate and recommend Genio's solutions [Why choose Genio](https://genio.co/solutions/why-choose-genio)Why choose Genio![Image 42: Genio website favicon 300x300-1](https://genio.co/hubfs/Genio%20website%20favicon%20300x300-1.svg) Why choose Genio Explore all the reasons Genio is the #1 note taking solution to boost knowledge, skills and confidence * Pricing * [Packages for institutions](https://genio.co/pricing/institutions)Packages for institutions![Image 43: roi-calculator-icon](https://genio.co/hubfs/website/vectors/menu-icons/roi-calculator-icon.svg) Packages for institutions Explore our packages and provide Genio Notes for students [Individual plans for students](https://genio.co/pricing/individuals)Individual plans for students ![Image 44: Individual plans for students icon](https://genio.co/hubfs/website/vectors/menu-icons/icon_individual%20pricing.png) Individual plans for students Purchase a Genio Notes subscription for your studies or on behalf of someone else [Get Genio Notes free](https://genio.co/pricing/get-genio-free)Get Genio Notes free![Image 45: icon_get genio free](https://genio.co/hubfs/website/vectors/menu-icons/icon_get%20genio%20free.png) Get Genio Notes free Find out if you can get Genio Notes through government programs or your institution * [Institution Wide](https://genio.co/pricing/institution-wide)Institution Wide![Image 46: Institution Wide icon](https://genio.co/hubfs/website/vectors/menu-icons/faculty-support-icon.svg) Institution Wide Drive student engagement and retention at your institution [ROI calculator](https://genio.co/resources/roi-calculator)ROI calculator![Image 47: ROI calculator icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_balancing%20work.svg) ROI calculator See how much you could save by improving retention and persistence with Genio Notes [Request a demo account](https://genio.co/solutions/recommend-genio/demonstrator-account)Request a demo account![Image 48: Request a demo account icon](https://genio.co/hubfs/website/vectors/menu-icons/tool-for-admins-icon.svg) Request a demo account [Activate a Genio Notes licence](https://app.genio.co/notes/activate)Activate a Genio Notes licence![Image 49: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Activate a Genio Notes licence * Resources * [Product and feature guides](https://genio.co/resources/product-and-feature-guides)Product and feature guides![Image 50: Product and feature guides icon](https://genio.co/hubfs/website/vectors/menu-icons/video_guides-icon-01.svg) Product and feature guides [Learner support and retention](https://genio.co/resources/learner-support-and-retention)Learner support and retention![Image 51: Learner support and retention icon](https://genio.co/hubfs/website/vectors/menu-icons/the_glean_study_tool_Icon.svg) Learner support and retention [Recommend Genio in needs assessments](https://genio.co/resources/assessors-toolkit)Recommend Genio in needs assessments![Image 52: Recommend Genio in needs assessments icon](https://genio.co/hubfs/website/vectors/menu-icons/recommend-glean-icon.svg) Recommend Genio in needs assessments [Tips and advice for students](https://genio.co/resources/tips-and-advice-for-students)Tips and advice for students![Image 53: Tips and advice for students icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_learning%20accessible.svg) Tips and advice for students [Implement Genio in your institution](https://genio.co/resources/implement-genio)Implement Genio in your institution![Image 54: Implement Genio in your institution icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_higher%20ed.svg) Implement Genio in your institution [Accessibility and compliance](https://genio.co/resources/compliance-and-accessibility)Accessibility and compliance ![Image 55: Accessibility and compliance icon](https://genio.co/hubfs/website/vectors/menu-icons/it-icon.svg) Accessibility and compliance [Genio AI Hub](https://genio.co/ai-hub)Genio AI Hub![Image 56: Genio AI Hub](https://genio.co/hubfs/website/vectors/menu-icons/about-us-icon.svg) Genio AI Hub [Support for STEM students](https://genio.co/notes/stem-study-support-tools)Support for STEM students![Image 57: roi-calculator-icon](https://genio.co/hubfs/website/vectors/menu-icons/roi-calculator-icon.svg) Support for STEM students * [Events and webinars](https://genio.co/resources/events-and-webinars)Events and webinars![Image 58: Events and webinars icon](https://genio.co/hubfs/website/vectors/menu-icons/events-icon.svg) Events and webinars [Case studies and user stories](https://genio.co/resources/case-studies-and-user-stories)Case studies and user stories![Image 59: Case studies and user stories icon](https://genio.co/hubfs/website/vectors/menu-icons/case-studies-icon.svg) Case studies and user stories [Blog](https://genio.co/blog)Blog![Image 60: Blog icon](https://genio.co/hubfs/website/vectors/menu-icons/blog-icon.svg) Blog [Research and insights](https://genio.co/resources/research-and-insights)Research and insights![Image 61: Our Brand Story icon](https://genio.co/hubfs/website/vectors/menu-icons/guides-icon.svg) Research and insights [Help center](https://help.genio.co/)Help center![Image 62: Help center icon](https://genio.co/hubfs/website/vectors/menu-icons/customer-support-icon.svg) Help center [Genio Podcast: Learning Outcomes Leaders](https://genio.co/resources/learning-outcomes-leaders-podcast)Genio Podcast: Learning Outcomes Leaders![Image 63: Genio Podcast: Learning Outcomes Leaders](https://genio.co/hubfs/mic.png) Genio Podcast: Learning Outcomes Leaders * About Genio * [About us](https://genio.co/about)About us![Image 64: About us icon](https://genio.co/hubfs/Genio%20website%20favicon%20300x300.svg) About us [Careers](https://genio.co/about/careers)Careers![Image 65: Careers icon](https://genio.co/hubfs/website/vectors/menu-icons/careers-icon.svg) Careers [Research Accreditation Hub](https://genio.co/about/research-accreditation-hub)Research Accreditation Hub![Image 66: Research Accreditation Hub icon](https://genio.co/hubfs/website/vectors/menu-icons/icon_research%20accreditations.png) Research Accreditation Hub [Our Brand Story](https://genio.co/about/our-brand-story)Our Brand Story![Image 67: Our Brand Story icon](https://genio.co/hubfs/website/vectors/menu-icons/guides-icon.svg) Our Brand Story [Life at Genio](https://genio.co/about/careers/life-at-genio)Life at Genio![Image 68: Life at Genio icon](https://genio.co/hubfs/website/vectors/menu-icons/megamenu%20icon_faculty%20staff.svg) Life at Genio [Contact us](https://genio.co/contact)Contact us![Image 69: Contact us icon](https://genio.co/hubfs/website/vectors/menu-icons/contact-us-icon.svg) Contact us * [Watch a demo](https://genio.co/watch-demo) 1. [Blogs](https://genio.co/blog) 2. [Tech Blog](https://genio.co/blog/tag/tech-blog) # Bring an icon to life with CSS Joss shares how you can create your own icon with CSS ![Image 70: Clock](https://genio.co/hubfs/raw_assets/public/genio-2025/images/clock.svg) 2 min read ![Image 71: Calendar](https://genio.co/hubfs/raw_assets/public/genio-2025/images/calender.svg)Published: 18 Apr 2023 ![Image 72: Author](https://genio.co/hubfs/raw_assets/public/genio-2025/images/author.svg)Joss Dixon ![Image 73: Bring an icon to life with CSS](https://genio.co/hubfs/TECH%20BLOG_bring%20icon%20to%20life%20THUMB.png) ![Image 74: Illustration Of A Computer With A Robot Face On It](https://genio.co/hubfs/TECH%20BLOG_bring%20icon%20to%20life%20HERO.png) It’s arguable that good animation should complement the page and add a certain finesse to the overall design rather than being a focal point of it. If anything, err on the side of caution and consider the possibility of a particular flourish becoming a bit irritating when seen repeatedly by the user. If that seems at all likely, tone it down and go for something less dramatic. I had a perfect opportunity to put this into practice recently while working on a prototype for a new feature at Genio. While I won’t reveal the specifics of the work for fear of sharing highly classified information, it’s still easy enough to illustrate the point. Let’s say you have a small icon or image that you want to animate, but rather than giving it a simple rotation or fade you want to show the effect of it going through a small change in state. Fundamentally, animating this change relies on keeping the icon whole while changing one element of it. For a good example, I recommend hovering your mouse over the small mascot face in the top left corner of the Twitch website. As a disclaimer, there may well be much better ways of doing this (and indeed you can probably see that the following is not what Twitch do), but for me this was a quick and straightforward solution. The trick is to give the illusion of there being a single image which changes, when in fact it’s simply a transition between two similar images. ![Image 75: Illustration Of A Robot Head](https://genio.co/hs-fs/hubfs/TECH%20BLOG_bring%20icon%20to%20life%20BODY.png?width=800&height=238&name=TECH%20BLOG_bring%20icon%20to%20life%20BODY.png) I’ll show you the way that I achieved this. First, you’re going to have a structure like this: `
` `` `` `
` Secondly, use a grid to position the images on top of each other. For me, this is preferable to using absolute and relative positioning because it’s much simpler and more responsive. This would mean that in your CSS you’d have something like this:`.image-container {    display: grid;}.image-one {    grid-row: 1;    grid-column: 1;}.image-two {    grid-row: 1;    grid-column: 1;}`The final step is to add some sort of event listening depending on when you want the effect to be fired. In my opinion, hover effects are particularly good because they’re more nuanced in their response, frequently visible to the user but also unlikely to be distracting. At Genio we use React, so it’s simple enough to just add a useState hook with some conditional class names to achieve the desired effect. The resulting code would look something like this:`…const [hovered, setHovered] = useState(false)…
    setHovered(true)}      onMouseLeave={() => setHovered(false)}    >    setHovered(true)}      onMouseLeave={() => setHovered(false)}    >
`All that’s left is to add transitioning effects. You’ll want some sort of opacity change, and with the right kind of image adding a bit of motion (e.g. with tilt) can help to enhance the illusion. Use keyframes and the animate property to put it into action, and you should be good to go. The finished result in the css will look something like the following - I also decided to have the animation loop back to its starting point:`….image-one {  grid-column: 1;  grid-row: 1;  &--hovered {    grid-column: 1;    grid-row: 1;    animation: tilt 1s ease-in-out;  }}.image-two {  grid-column: 1;  grid-row: 1;  opacity: 0;  &--hovered {    grid-column: 1;    grid-row: 1;    animation: fade 1s ease-in-out;    opacity: 0;  }}@keyframes tilt {  0% {    transform: rotate(0deg);    opacity: 1;  }  50% {    transform: rotate(-15deg);    opacity: 0;  }  60% {    transform: rotate(-15deg);    opacity: 0;  }  100% {    transform: rotate(0deg);    opacity: 1;  }}@keyframes fade {  0% {    opacity: 0;  }  50% {    opacity: 1;  }  60% {    opacity: 1;  }  100% {    opacity: 0;  }}` As mentioned before, there are limitations to this method and I wouldn’t say it’s objectively the best. Using useState can leave you vulnerable to bugs such as small visual discrepancies arising from rendering two different images. Also, you’re somewhat restricted in the degree to which you can animate, and this would probably be difficult to fine tune. However, I’d recommend it as a quick solution that gives you lucid code and doesn’t rely on manipulating SVGs. [Visit our Careers page](https://glean.co/our-company/careers) ## Share this blog Facebook [![Image 76](https://genio.co/hubfs/raw_assets/public/genio-2025/images/facebook.png)](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fgenio.co%2Fblog%2Fbring-an-icon-to-life-with-css%3Futm_campaign%3Dshare-links%26utm_source%3Dfacebook%26utm_medium%3Dsocial) LinkedIn [![Image 77](https://genio.co/hubfs/raw_assets/public/genio-2025/images/linkedIn.png)](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fgenio.co%2Fblog%2Fbring-an-icon-to-life-with-css%3Futm_campaign%3Dshare-links%26utm_source%3Dlinkedin%26utm_medium%3Dsocial) Twitter [![Image 78](https://genio.co/hubfs/raw_assets/public/genio-2025/images/twitter.png)](https://twitter.com/share?url=https%3A%2F%2Fgenio.co%2Fblog%2Fbring-an-icon-to-life-with-css%3Futm_campaign%3Dshare-links%26utm_source%3Dtwitter%26utm_medium%3Dsocial) Email [![Image 79](https://genio.co/hubfs/raw_assets/public/genio-2025/images/email.svg)](mailto:?subject=Bring+an+icon+to+life+with+CSS&body=https%3A%2F%2Fgenio.co%2Fblog%2Fbring-an-icon-to-life-with-css%3Futm_campaign%3Dshare-links%26utm_source%3Demail%26utm_medium%3Dsocial) [![Image 80](https://genio.co/hubfs/raw_assets/public/genio-2025/images/copy_link.svg)](https://genio.co/blog/bring-an-icon-to-life-with-css) ![Image 81: Time for a simpler, smarter note taking accommodation?](https://genio.co/hubfs/cta_image.svg) ## **Time for a simpler, smarter note taking accommodation?** Genio is the online note taking tool that makes compliance simple, reduces cost and admin burden, and improves student outcomes. [![Image 82: Learn More](https://hubspot-no-cache-eu1-prod.s3.amazonaws.com/cta/default/24880982/edb6c600-e949-4a2c-983d-c7e2ecf6eec5.png)](https://hubspot-cta-redirect-eu1-prod.s3.amazonaws.com/cta/redirect/24880982/edb6c600-e949-4a2c-983d-c7e2ecf6eec5) ## More from **Tech Blog** [View All](https://genio.co/blog/tag/tech-blog) [![Image 83: Beyond compliance: Why accessibility is in our DNA at Genio](https://genio.co/hs-fs/hubfs/BLOG_uni%20survival%20tips%20THUMB.png?width=450&name=BLOG_uni%20survival%20tips%20THUMB.png) ![Image 84: Clock](https://genio.co/hubfs/raw_assets/public/genio-2025/images/clock.svg) 4 min read ### Beyond compliance: Why accessibility is in our DNA at Genio Discover how Genio prioritizes accessibility beyond compliance, the ACE team behind our core commitments and why fostering an inclusive culture that empowers students with disabilities through innovative tools is essential to our mission.](https://genio.co/blog/beyond-compliance-accessibility-dna-genio)[![Image 85: How learning science drives our product features at Genio](https://genio.co/hs-fs/hubfs/BLOG_How%20disability%20affects%20learning%20THUMB.png?width=450&name=BLOG_How%20disability%20affects%20learning%20THUMB.png) ![Image 86: Clock](https://genio.co/hubfs/raw_assets/public/genio-2025/images/clock.svg) 4 min read ### How learning science drives our product features at Genio Former educators Alice and Faye share how the Engineering team at Genio used the concept of retrieval practice from learning science to inform new Quiz Me feature updates within Genio Notes.](https://genio.co/blog/how-learning-science-drives-product-features-at-genio)[![Image 87: AI Principles at Genio](https://genio.co/hs-fs/hubfs/BLOG_study%20tools%20available%20for%20students%20THUMB.png?width=450&name=BLOG_study%20tools%20available%20for%20students%20THUMB.png) ![Image 88: Clock](https://genio.co/hubfs/raw_assets/public/genio-2025/images/clock.svg) 2 min read ### AI Principles at Genio Learn about the important principles we stick to at Genio when working with AI. Sticking to key principles helps us to ensure we can get the best of AI while keeping control and protecting our values](https://genio.co/blog/ai-principles-at-genio) [View All](https://genio.co/blog/tag/tech-blog) [Genio logo - home](https://genio.co/) * Products * [Genio Notes](https://genio.co/notes) * [The Confident Notetaker's Masterclass](https://genio.co/the-confident-notetakers-masterclass) * [Genio Present](https://genio.co/present) * Pricing and plans * [For institutions](https://genio.co/pricing/institutions) * [Institution Wide package](https://genio.co/pricing/institution-wide) * [Individual user quote](https://cc.genio.co/genio-individual-user-quote-request) * [ROI calculator](https://genio.co/resources/roi-calculator) * [For individuals](https://genio.co/pricing/individuals) * [Get Genio Notes for free](https://genio.co/pricing/get-genio-free) * Why choose Genio * [Genio for institutions](https://genio.co/solutions/institutions) * [Genio for students](https://genio.co/solutions/students) * [Recommend Genio](https://genio.co/resources/assessors-toolkit) * Resources * [Blog](https://genio.co/blog) * [Events and webinars](https://genio.co/resources/events-and-webinars) * [Case studies and user stories](https://genio.co/resources/case-studies-and-user-stories) * [Product and feature guides](https://genio.co/resources/product-and-feature-guides) * [Research and insights](https://genio.co/resources/research-and-insights) * [Sign in](https://app.genio.co/account/sign-in) * About us * [About us](https://genio.co/about) * [Careers](https://genio.co/about/careers) * [Our Brand Story](https://genio.co/about/our-brand-story) * [Our history](https://genio.co/about/our-history) * [Research Accreditation Hub](https://genio.co/about/research-accreditation-hub) * [Media Kit](https://genio.co/about/media-kit) * Contact and support * [Get in touch](https://genio.co/contact) * [Help centre](https://help.genio.co/)Opens in a new tab * [Device compatibility](https://genio.co/specification) * [Service status](https://status.genio.co/)Opens in a new tab * [Visit us on our social](https://www.facebook.com/GenioLearn) * [Visit us on our social](https://www.instagram.com/geniolearn) * [Visit us on our social](https://uk.linkedin.com/company/geniolearn) * [Visit us on our social](https://www.youtube.com/@geniotools) * [Visit us on our social](https://www.tiktok.com/@geniolearn) * [![Image 89: Icon](https://genio.co/hs-fs/hubfs/website/vectors/Google_Play_Store_badge_EN.png?width=120&name=Google_Play_Store_badge_EN.png)Download app](https://play.google.com/store/apps/details?id=co.genio.notes) * [![Image 90: Icon](https://genio.co/hubfs/website/vectors/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg)Download app](https://apps.apple.com/gb/app/genio-notes/id6758772863) * [Privacy Notice](https://genio.co/privacy-notice) * [Service Agreement](https://genio.co/service-agreement) * [Accessibility Statement](https://genio.co/accessibility-statement) * [Data Security](https://genio.co/security) * [Third Party Licenses](https://genio.co/third-party-code-licenses) * [Cookie Preferences](https://genio.co/cookies) [](https://genio.co/blog/bring-an-icon-to-life-with-css)