Foundation
The Foundation icon signifies a popular front-end framework used for building responsive and mobile-first interfaces.
Exports at 16 × 24 px
Code
Foundation in your framework
In any framework. Customize it above, and the code follows.
export const FoundationIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 256 380" {...props}>
<path fill="#1A4658" d="M255.846 364.169c0 8.577-57.26 15.53-127.895 15.53C57.315 379.7.055 372.746.055 364.17c0-8.578 67.17-15.53 127.896-15.53c72.286 0 127.895 6.952 127.895 15.53"/><path fill="#EDF7FA" d="M247.93 252.11c-3.959 0-8.222-1.828-11.268-15.835s-7.613-28.32-7.613-28.32c4.873 0 7.613-2.132 7.613-2.132c-3.35-1.524-10.659-6.7-15.53-13.094c-4.872-6.395-17.358-16.75-17.358-16.75v-20.705c0-14.009 8.984-24.97 8.984-24.97c-6.09 0-8.984 5.48-8.984 5.48v-29.537c0-29.234 14.768-42.327 14.768-42.327c-4.567-.304-7.612 1.827-7.612 1.827c2.132-21.62 8.755-28.015 8.755-28.015c-24.36-6.395-37.95 7.918-37.95 7.918c-2.74-13.094 7.975-20.71 7.975-20.71c-12.484-2.74-22.81.914-22.81.914c0-19.184 7.626-25.583 7.626-25.583c-38.064 0-59.676 28.62-59.676 28.62c-1.522-12.18 1.83-22.849 1.83-22.849c-36.845 15.53-46.587 49.923-46.587 49.923c-2.436-5.785-2.74-18.92-2.74-18.92S52.126 62.55 49.386 80.21c-2.74 17.662 2.436 68.364 2.436 68.364s-2.435-3.044-7.612-3.653c0 0 5.48 6.09 5.48 19.793c0 0-2.131-1.827-5.785-.913c0 0 5.785 5.176 6.395 14.007c0 0-6.7 4.568-10.354 9.135c0 0-5.786.305-8.831 1.218c0 0 4.873 2.74 5.786 5.177c0 0-14.312 14.617-21.62 26.492c0 0 6.395-3.958 10.962-2.74c0 0-10.05 12.18-13.399 32.278c0 0 4.872-2.435 7.004-1.217c0 0-6.09 12.789-6.395 26.187l-6.699 3.96l5.177 3.654s-3.959 16.443-4.873 25.883c0 0 3.045-3.045 5.481-3.958c0 0 3.35 7.916 7.918 14.007S35.38 329.15 41.47 329.15l11.447-.446c-1.42 6.126-4.22 11.32-10.124 11.593l-.655 1.05a7 7 0 0 0-.364-.016c-.117 1.788-3.727 2.11-4.72 3.35c-3.018 3.765-5.319 8.938-6.852 13.55c-1.123 3.38-.592 3.38-1.37 6.852c-.255 1.136-1.434 2.35-1.827 3.501c3.288-1.104 12.4-1.842 17.2-2.194l.081 4.248s.792.736 2.102 1.27c.046-.01.09-.022.144-.017c.445.036.875.101 1.296.206c7.202-.645 12.217.57 20.566-.123c1.624-.193 3.147-.421 4.569-1.23c.404-1.209.459-1.283.649-2.843c.04-.278.04-.564.108-.903l.385-.06a1 1 0 0 1 .298-.04c.036-.012.066-.028.106-.032l.396-.034a.4.4 0 0 1 .256-.022c1.512-.135 3.937-.262 5.448-.345c4.91-.008 11.372.558 11.372.558c.4-5.505.799-14.045 9.706-38.94l2.208-1.37s27.357 9.64 52.741-.389c2.009 4.944 8.508 21.562 9.53 32.038c.874 1.228.777 2.786.806 4.437c.025 1.397.143 2.795.18 4.188c.913-.125 4.21-.528 8.37-.522c1.51.083 3.936.21 5.448.345a.4.4 0 0 1 .256.022l.396.034c.04.004.07.02.106.031a1 1 0 0 1 .298.042q.19.026.385.06c.067.338.067.624.109.902c.19 1.56.244 1.634.648 2.842c.13.074.262.139.394.204c4.546-.577 9.152-.682 13.725-.466c3.598.17 7.134.846 10.674 1.49l.004.102c.357.038.705.063 1.054.086c1.9.34 3.804.656 5.721.863c.037-2.398.024-4.495-.027-6.337c3.814.183 9.335.942 11.65 1.28c.92.22 1.665.355 2.448.524c.106.031.218.063.315.095l-.012-.027c.786.176 1.634.4 2.753.789c-.17-2.06-.155-2.018-.428-4.6c-.21-1.998-1.642-8.066-4.322-10.57c0 0 2.92 1.263 3.811 1.765c-2.878-3.9-4.277-9.474-13.32-13.318c0 0 1.651-.78 3.161-.976c-1.578-.972-2.783-1.354-4.38-1.239c.542-1.541 2.93-5.43 4.934-5.929c0 0-1.23-.855-3.24-.193a19 19 0 0 0-2.18 1.309c-.266.188-.655-.007-.734-.299c-.632-2.338-1.043-4.713-1.416-7.099c18.223-.66 20.779-10.009 20.779-10.009c1.522 1.219 1.522 3.959 1.522 3.959c7.916-10.354 7.003-20.708 7.003-20.708c1.828.304 3.35 1.523 3.35 1.523c.914-15.835-3.958-42.937-3.958-42.937c2.436 1.218 3.958-.304 3.958-.304c-2.74-1.217-3.044-4.263-3.044-4.263c3.959.304 4.568-3.35 4.568-3.35"/><path fill="#CDE9EE" d="M73.719 367s.714-7.702-1.798-13.26c0 0 4.757.323 5.556 12.885c0 0-3.331.387-3.758.374m-23.877-25.972l.03-.236c.017.117.015.207-.03.236m4.454 25.375l-.043-.011l.056-.145z"/><path fill="#CDE9EE" d="M114.851 28.892c-1.522-12.181 1.83-22.85 1.83-22.85c-36.846 15.53-46.588 49.923-46.588 49.923c-2.436-5.785-2.74-18.92-2.74-18.92S52.126 62.55 49.386 80.21c-2.74 17.662 2.436 68.364 2.436 68.364s-2.435-3.044-7.612-3.653c0 0 5.48 6.09 5.48 19.793c0 0-2.131-1.827-5.785-.913c0 0 5.785 5.176 6.395 14.007c0 0-6.7 4.568-10.354 9.135c0 0-5.786.305-8.831 1.218c0 0 4.873 2.74 5.786 5.177c0 0-14.312 14.617-21.62 26.492c0 0 6.395-3.958 10.962-2.74c0 0-10.05 12.18-13.399 32.278c0 0 4.872-2.435 7.004-1.217c0 0-6.09 12.789-6.395 26.187l-6.699 3.96l5.177 3.654s-3.959 16.443-4.873 25.883c0 0 3.045-3.045 5.481-3.958c0 0 3.35 7.916 7.918 14.007S35.38 329.15 41.47 329.15l.771-.105c-.34 2.099-.722 4.19-1.28 6.251c-.078.292-.467.487-.734.299a19 19 0 0 0-2.178-1.31c-2.01-.66-3.241.194-3.241.194c2.004.5 4.392 4.388 4.935 5.93c-1.598-.116-2.803.266-4.381 1.238c1.51.197 3.161.976 3.161.976c-9.042 3.844-10.442 9.419-13.32 13.318c.891-.502 3.81-1.764 3.81-1.764c-2.679 2.503-4.11 8.571-4.321 10.569c-.272 2.582-.257 2.54-.427 4.6c2.397-.834 3.562-.916 5.502-1.381c2.999-.437 11.378-1.586 14.456-1.266l-.485 5.92l.151-.002c1.58-.453 2.868-.393 4.277-.544a71 71 0 0 1 .24-4.888c-.094-2.778.251-5.308.819-8.128c.018-.095.042-.193.061-.288c1.118-3.85 3.063-6.042 4.326-7.39a8.2 8.2 0 0 0 1.095-1.522a15.4 15.4 0 0 0 2.142-3.96c1.252-3.415.715-10.92-1.8-18.245c2.652 3.816 5.069 7.165 6.214 8.31l-.076-9.324s4.872 4.868 9.233 8.547c2.1 1.833 4.689 4.217 6.527 5.167c.133.084.253-.802.4.535h-.002c.019 0 .037-.265.056-.254c2.47 1.385 5.01 2.486 7.388 4.025c.255.164.515.244.765.416c1.1.758 3.038 1.6 4.78 2.518l1.647 19.449c1.484-20.44 13.132-40.014 13.132-40.014l-.427-.13c-3.604-1.115-29.974-10.238-45.554-42.814c-1.026-2.145 5.785 2.435 5.785 2.435c-6.395-15.53-8.831-40.5-8.831-40.5c2.131 1.827 4.263 2.131 4.263 2.131c-4.567-12.79-6.394-28.624-6.394-42.937c-1.218-77.041 27.254-94.703 27.254-94.703c-4.872-1.827-10.049-1.675-10.049-1.675c5.634-13.55 24.36-32.43 24.36-32.43c-5.024.305-24.665 5.633-24.665 5.633c16.292-42.48 32.736-53.746 32.736-53.746c-1.218 10.2 2.74 21.011 2.74 21.011c35.324-43.698 63.705-41.66 63.705-41.66C172.14 3.26 174.53.271 174.53.271c-38.065 0-59.68 28.62-59.68 28.62m99.848 337.867s-.343-11.039-2.854-16.596c0 0 6.547 4.035 6.51 16.786c0 0-3.228-.177-3.656-.19"/><path fill="#ABD8D7" d="M44.356 309.983c4.313-42.238 5.486-124.868 5.486-124.868c-9.363 18.5-16.9 52.072-16.9 52.072l1.827 7.308l-4.11-1.826c-6.608 22.93-2.137 53.625-.657 62.272c4.203 3.328 9.21 4.45 14.354 5.042m-8.833-.913a667 667 0 0 0 4.27 19.985c1.143.172 2.428.085 2.428.085c1.048-4.083 1.221-10.404 2.036-18.179c-3.002-.351-5.948-.885-8.734-1.891"/><path fill="#CDE9EE" d="M178.633 345.467a.446.446 0 0 1-.533-.207a19 19 0 0 0-1.08.242l.001-.002c6.282-4.571 6.86-9.406 6.86-9.406c-4.168 1.879-8.592 2.58-10.744 2.828c14.521-12.587 16.934-35.959 16.934-35.959c-5.948 7.301-14.388 13.471-20.911 17.612l.014-.028s-4.37 2.444-8.41 4.347a.46.46 0 0 0-.487.227c-2.075.962-4.01 1.746-5.149 1.936c0 0 3.363 6.21 4.768 9.559l-.276.223s4.866 11.5 6.637 22.64c.187 1.883.331 3.532.432 4.792c.085 1.63.2 2.753.2 2.753c6.434-.952 15.521-.025 15.521-.025c-.043 1.048.532 3.564.638 4.02c3.055-.412 6.137-.592 9.22-.618c-.04-10.798-.515-28.739-13.635-24.934"/><path fill="#83BAC0" d="M44.019 313.24c-10.089-1.706-19.244-13.3-19.244-13.3c7.356 7.821 16.513 8.869 16.513 8.869c1.209-8.933-6.175-29.378-6.175-29.378c5.469 6.81 8.46 14.686 10.095 21.133z"/><path fill="#ABD8D7" d="M66.914 297.424s7.937 13.988 14.902 20.04c7.518 6.532 14.503 15.76 17.472 21.354c0 0 3.768-8.753 5.824-11.8c0 0-22.268-6.527-38.198-29.594m103.589 27.283c1.104-1.553 2.368-2.996 3.572-4.47c1.975-2.418 4.232-4.765 5.89-7.397c-2.862 2.142-6.049 3.997-9.307 5.958c-9.456 6.407-16.043 8.22-16.043 8.22c2.055 3.047 5.823 11.8 5.823 11.8c1.797-3.386 5.07-8.103 9.037-12.748c.333-.462.704-.905 1.028-1.363"/><path fill="#545352" d="M63.904 89.11c-.866.062-3.637.132-3.637.132C35.16 90.995 16.706 71.54 16.706 71.54s-1.65 15.187 9.256 28.495c10.91 13.308 33.017 15.585 33.017 15.585c.718 3.112-.838 10.052-.838 10.052s6.465-7.15 8.106-20.699c1.153-9.494-1.807-15.901-2.343-15.863"/><path fill="#6E7979" d="M63.904 89.11c-.833.047-3.637.132-3.637.132C35.16 90.995 16.706 71.54 16.706 71.54s11.47 33.194 49.775 30.57c0 0 1.059-6.14-2.577-13"/><path fill="#545352" d="M189.257 89.11c.865.062 3.636.132 3.636.132C218 90.995 236.454 71.54 236.454 71.54s1.65 15.187-9.256 28.495c-10.91 13.308-33.017 15.585-33.017 15.585c-.718 3.112.838 10.052.838 10.052s-6.465-7.15-8.106-20.699c-1.153-9.494 1.808-15.901 2.344-15.863"/><path fill="#6E7979" d="M189.257 89.11c.832.047 3.636.132 3.636.132C218 90.995 236.454 71.54 236.454 71.54s-11.47 33.194-49.775 30.57c0 0-1.059-6.14 2.578-13"/><path fill="#CDE9EE" d="M50.799 201.559s-18.047 64.861 0 106.428zm179.697 102.6c-8.908 6.797-18.175 7.227-18.175 7.227c-.413-8.88 9.294-28.293 9.294-28.293a21.1 21.1 0 0 0-5.445 4.612l-.063-6.515l7.003-5.785l-5.632-4.568l7.155-28.777l-6.851 4.568s-2.131-40.956-.61-58.618c0 0-8.678-8.68-12.94-12.181c0 0 .805 12.61 1.724 32.758c3.89 16.163 9.93 49.611 2.415 79.029c.087 5.963.151 12.018.186 18.132c0 0 3.745 13.01 4.962 22.145c0 0 1.218.343 3.045.039l-.138-13.99c9.409-2.842 14.07-9.783 14.07-9.783m-84.428-125.594c0 6.918 4.43 12.526 9.897 12.526c5.466 0 9.898-5.608 9.898-12.526c0-6.92-4.432-12.527-9.898-12.527c-5.467 0-9.897 5.608-9.897 12.527"/><path fill="#FFF" d="M146.373 175.219c0 6.811 4.362 12.333 9.745 12.333s9.745-5.522 9.745-12.333c0-6.812-4.363-12.333-9.745-12.333c-5.383 0-9.745 5.521-9.745 12.333"/><path fill="#474746" d="M153.53 168.86a3.8 3.8 0 0 0-.13.954c0 1.737 1.132 3.143 2.527 3.143c1.241 0 2.268-1.112 2.482-2.578c.796 1.044 1.287 2.45 1.287 4.002c0 3.217-2.096 5.824-4.682 5.824c-2.585 0-4.682-2.607-4.682-5.824c0-2.57 1.34-4.748 3.198-5.52"/><path fill="#CDE9EE" d="M98.563 178.565c0 6.918 4.431 12.526 9.898 12.526s9.897-5.608 9.897-12.526c0-6.92-4.431-12.527-9.897-12.527s-9.898 5.608-9.898 12.527"/><path fill="#FFF" d="M98.869 175.219c0 6.811 4.362 12.333 9.745 12.333s9.744-5.522 9.744-12.333c0-6.812-4.362-12.333-9.744-12.333c-5.383 0-9.745 5.521-9.745 12.333"/><path fill="#474746" d="M107.854 168.86a3.8 3.8 0 0 0-.131.954c0 1.737 1.131 3.143 2.527 3.143c1.24 0 2.268-1.112 2.482-2.578c.796 1.044 1.287 2.45 1.287 4.002c0 3.217-2.097 5.824-4.682 5.824s-4.682-2.607-4.682-5.824c0-2.57 1.34-4.748 3.199-5.52"/><path fill="#545352" d="M181.728 188.393c-.621 1.87-2.73 2.366-8.738 3.527l-.41.08c-5.886 1.13-16.41.982-22.175.14a31 31 0 0 1-.717-.11c-5.343-.904-5.951-1.596-7.67-4.365c-1.774-2.866-2.865-11.282-3.066-12.941l-.01-.084c-.213-1.754-.319-2.632 1.934-3.64c3.03-1.36 16.482-3.258 21.993-3.506c4.352-.192 13.576.414 17.793 1.03c.662.098 1.151.187 1.454.267c.486.129 2.272.998 2.181 2.897c-.118 2.504-1.73 14.179-2.57 16.705m-58.665-13.753l-.01.084c-.201 1.66-1.292 10.075-3.067 12.94c-1.718 2.77-2.326 3.462-7.67 4.365q-.341.058-.717.11c-5.763.843-16.288.99-22.175-.14l-.409-.079c-6.008-1.161-8.117-1.658-8.738-3.527c-.84-2.526-2.451-14.2-2.57-16.705c-.09-1.9 1.696-2.768 2.182-2.897c.302-.08.792-.17 1.453-.267c4.218-.616 13.441-1.222 17.793-1.03c5.512.248 18.963 2.146 21.993 3.505c2.254 1.009 2.148 1.887 1.935 3.641m66.38-11.116c-4.413-.645-12.116-1.376-21.362-.905c-12.032.62-22.341 2.29-28.5 3.287c-1.838.298-3.283.533-4.385.68l-1.202.162c-1.351.186-2.237.304-2.992.341c-.754-.037-1.64-.155-2.99-.34l-1.204-.164c-1.101-.146-2.546-.38-4.385-.679c-6.158-.997-16.467-2.668-28.5-3.287c-9.245-.471-16.948.26-21.361.905c0 0-4.71.6-8.738 2.303l.768 5.12s4.256-1.014 8.413-1.569c.772 7.22 2.276 16.495 2.276 16.495l.024.288c.114.468.22.922.335 1.417c.857 3.647 1.707 5.792 5.128 7.078c3.36 1.268 11.308 2.443 19.325 2.856c2.981.154 6.365-.03 9.787-.528c5.075-.74 9.666-2.107 11.42-3.404c2.552-1.886 3.917-6.632 4.82-9.773l.271-.925c.32-1.071.597-2.195.865-3.286c.386-1.566.783-3.184 1.124-3.743c.061-.097.347-.435 1.463-.599q.518-.074 1.16-.081q.64.007 1.16.081c1.114.164 1.4.502 1.462.6c.34.558.738 2.176 1.123 3.742c.269 1.09.546 2.215.866 3.286l.27.925c.904 3.14 2.27 7.887 4.821 9.773c1.754 1.297 6.344 2.663 11.42 3.404c3.421.498 6.806.682 9.786.528c8.018-.413 15.966-1.588 19.326-2.856c3.42-1.286 4.27-3.43 5.128-7.078c.115-.495.22-.95.335-1.417l.024-.288s1.503-9.276 2.276-16.495c4.157.555 8.413 1.569 8.413 1.569l.768-5.12c-4.028-1.704-8.738-2.303-8.738-2.303"/><path fill="#A0D1DE" d="M111.516 150.56s-11.008-5.25-17.309 4.498c0 0-.65-9.694 8.24-10.777c8.89-1.085 9.069 6.278 9.069 6.278m-4.129-14.243s-10.205-4.816-14.854 4.44c0 0-1.519-8.087 5.764-10.039s9.09 5.599 9.09 5.599m43.561 20.187s8.549-4.077 13.442 3.494c0 0 .505-7.528-6.399-8.37c-6.905-.842-7.043 4.876-7.043 4.876m6.079-13.483s8.65-1.401 10.132 6.505c0 0 2.871-5.708-2.144-8.73s-7.988 2.224-7.988 2.224"/><path fill="#B2DCE5" d="M110.75 227.355s6.04-4.06 9.605-4.618c0 0 .778 7.659 4.321 11.433c0 0 7.646-6.891 15.207-7.381c0 0 1.952 4.2 5.12 5.757l-.017.049c1.143.714 2.544 1.436 3.901 1.737c0 0 4.34-2.626 5.595-7.422c0 0 .418 10.125-5.938 15.644c0 0-4.846-2.365-8.338-6.151c-1.049-1.021-2.14-2.21-2.668-3.175c0 0-11.214 7.933-11.623 12.456c0 0-8.095-7.891-10.855-13.972c0 0-5.402 1.705-6.9 2.804c0 0-4.342-7.101-5.224-13.51c0 0 5.222 4.988 7.814 6.349"/><path fill="#545352" d="M131.133 207.454c-.448-.096 11.373.818 22.981.405c0 0 .62-2.214 1.51-3.43c0 0-.193 3.726.85 4.49c0 0-5.809 2.286-11.667 2.269c0 0 6.383-1.065 8.524-2.167c0 0-11.648.648-22.198-1.567"/>
</svg>
);Other libraries
Foundation in 4 more libraries
Each library draws it its own way. Open one to compare.
SVG Logos
More like it
Icons that share its tags, in the same style.
Search SVG Logos
Skip the copy and paste. With Pro, your AI agent finds and installs any SVG Logos icon from a prompt.
Get ProTags
Browse by tag
Foundation is tagged design, web development, framework and 1 more. Related tags follow; each opens its icons from every library.
Pricing
SVG Logos MCP, with Pro
Ask for Foundation or any of 2,063 SVG Logos icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Foundation icon means and where it's used, then how to install, style, label and license it.
The Foundation icon signifies a popular front-end framework used for building responsive and mobile-first interfaces. Foundation enables web developers to construct robust UI components.
This framework is used worldwide for numerous front-end developments. Applications built on top of Foundation range from custom solutions to highly scalable business applications.
Foundation simplifies the UX for web development. Developers use it to quickly prototype or set up interfaces while facilitating a more controlled and adaptive end-user experience.
Foundation is one of 2,063 icons in SVG Logos, made by Gil Barbara and released under CC0. It is drawn on a 256 × 380 grid.
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds FoundationIcon to components/icons/logos-foundation.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
Copy it as React (from Get icon, or the Code section): a typed FoundationIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the Foundation icon, or any of 2,063 SVG Logos icons, and install it from a prompt.
It's multicolor, so it keeps its own colors.
Set width and height on the component, or a class like size-6. It's drawn on a 256 × 380 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Yes. It keeps its own colors in light and dark mode, so check it against both backgrounds. The icon is a vector, so it needs no separate dark asset.
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="Foundation", so screen readers say what it does.
Yes. FoundationIcon passes every SVG prop to the svg element, so <FoundationIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
CC0 puts the icons in the public domain: use them anywhere, with no conditions. The full terms are in the license, linked on this page.
No. CC0 gives the icons to the public domain, so no credit and no notice is required. Icons installed with the shadcn CLI still start with a comment naming SVG Logos, Gil Barbara and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
4 other libraries draw an icon called Foundation. The Other libraries section on this page shows each one, so you can compare them and open the one that fits your style.
Its tags are design, web development, framework and responsive. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Foundation in another set.
4.9 out of 5 from 150+ developers
Install Foundation from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro