Hover the icon or press Play. Suggested motion: write. Pick another to preview it and update the animated code:
Codepen icon
A free codepen icon from Devicons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.
- License
- MIT license
- Project
- vorillaz.github.io
npx shadcn@latest add https://ui.cuelark.com/r/icons/devicons/codepen.jsonimport * as React from "react";
/**
* Codepen from Devicons (https://vorillaz.github.io/devicons/), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/devicons/codepen. Sized in em, colored by currentColor.
*/
export function DiCodepenIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
version="1.1"
viewBox="0 0 32 32"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M27.242 12.687c-0.005-0.027-0.010-0.055-0.017-0.081-0.004-0.016-0.010-0.031-0.015-0.047-0.008-0.024-0.015-0.047-0.025-0.070-0.007-0.016-0.014-0.031-0.022-0.047-0.010-0.022-0.021-0.043-0.033-0.064-0.009-0.015-0.018-0.030-0.028-0.045-0.013-0.020-0.026-0.040-0.041-0.059-0.011-0.014-0.022-0.028-0.033-0.042-0.015-0.018-0.031-0.036-0.048-0.053-0.013-0.013-0.025-0.026-0.039-0.038-0.017-0.016-0.036-0.031-0.055-0.046-0.015-0.011-0.029-0.023-0.044-0.033-0.005-0.004-0.010-0.008-0.016-0.012l-10.291-6.86c-0.325-0.217-0.748-0.217-1.073 0l-10.291 6.86c-0.006 0.004-0.010 0.008-0.016 0.012-0.015 0.011-0.029 0.022-0.044 0.033-0.019 0.015-0.037 0.030-0.055 0.046-0.013 0.012-0.026 0.025-0.038 0.038-0.017 0.017-0.033 0.034-0.048 0.053-0.012 0.014-0.022 0.027-0.033 0.042-0.014 0.019-0.028 0.039-0.041 0.059-0.009 0.015-0.019 0.030-0.027 0.045-0.012 0.021-0.023 0.042-0.033 0.064-0.007 0.016-0.015 0.031-0.022 0.047-0.010 0.023-0.018 0.047-0.025 0.070-0.005 0.016-0.011 0.031-0.015 0.047-0.007 0.027-0.012 0.054-0.017 0.081-0.003 0.014-0.006 0.028-0.008 0.042-0.005 0.042-0.009 0.084-0.009 0.126v6.86c0 0.043 0.003 0.085 0.009 0.126 0.002 0.014 0.005 0.028 0.008 0.042 0.005 0.027 0.010 0.054 0.017 0.081 0.004 0.016 0.010 0.031 0.015 0.047 0.008 0.024 0.016 0.047 0.025 0.071 0.006 0.016 0.014 0.031 0.022 0.047 0.010 0.022 0.021 0.043 0.033 0.065 0.009 0.015 0.018 0.030 0.027 0.044 0.013 0.020 0.026 0.040 0.041 0.059 0.011 0.015 0.022 0.028 0.033 0.042 0.015 0.018 0.031 0.035 0.048 0.052 0.012 0.013 0.025 0.026 0.038 0.038 0.017 0.016 0.036 0.031 0.055 0.046 0.014 0.011 0.029 0.023 0.044 0.033 0.006 0.004 0.010 0.008 0.016 0.012l10.29 6.86c0.163 0.108 0.349 0.163 0.537 0.163s0.374-0.054 0.537-0.163l10.29-6.86c0.006-0.004 0.011-0.008 0.016-0.012 0.015-0.011 0.029-0.022 0.044-0.033 0.019-0.015 0.037-0.030 0.055-0.046 0.013-0.012 0.026-0.025 0.039-0.038 0.017-0.017 0.033-0.034 0.048-0.052 0.012-0.014 0.023-0.027 0.033-0.042 0.014-0.019 0.028-0.039 0.041-0.059 0.009-0.015 0.019-0.029 0.028-0.044 0.012-0.021 0.023-0.043 0.033-0.065 0.007-0.015 0.015-0.031 0.022-0.047 0.010-0.023 0.017-0.047 0.025-0.071 0.005-0.016 0.011-0.031 0.015-0.047 0.007-0.027 0.012-0.054 0.017-0.081 0.002-0.014 0.006-0.028 0.008-0.042 0.005-0.042 0.009-0.084 0.009-0.126v-6.86c0-0.043-0.003-0.085-0.009-0.126-0.002-0.014-0.005-0.028-0.008-0.042zM16 18.575l-3.422-2.289 3.422-2.289 3.422 2.289-3.422 2.289zM15.033 12.316l-4.195 2.806-3.386-2.265 7.581-5.054v4.513zM9.098 16.286l-2.42 1.619v-3.238l2.42 1.619zM10.838 17.45l4.195 2.805v4.513l-7.581-5.054 3.386-2.265zM16.967 20.255l4.195-2.805 3.386 2.265-7.581 5.054v-4.513zM22.902 16.286l2.421-1.619v3.238l-2.421-1.619zM21.162 15.122l-4.195-2.806v-4.513l7.581 5.054-3.386 2.265z"
/>
</svg>
);
}import { DiCodepen } from "react-icons/di";
export function Example() {
return <DiCodepen className="size-5" />;
}<svg
version="1.1"
viewBox="0 0 32 32"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.242 12.687c-0.005-0.027-0.010-0.055-0.017-0.081-0.004-0.016-0.010-0.031-0.015-0.047-0.008-0.024-0.015-0.047-0.025-0.070-0.007-0.016-0.014-0.031-0.022-0.047-0.010-0.022-0.021-0.043-0.033-0.064-0.009-0.015-0.018-0.030-0.028-0.045-0.013-0.020-0.026-0.040-0.041-0.059-0.011-0.014-0.022-0.028-0.033-0.042-0.015-0.018-0.031-0.036-0.048-0.053-0.013-0.013-0.025-0.026-0.039-0.038-0.017-0.016-0.036-0.031-0.055-0.046-0.015-0.011-0.029-0.023-0.044-0.033-0.005-0.004-0.010-0.008-0.016-0.012l-10.291-6.86c-0.325-0.217-0.748-0.217-1.073 0l-10.291 6.86c-0.006 0.004-0.010 0.008-0.016 0.012-0.015 0.011-0.029 0.022-0.044 0.033-0.019 0.015-0.037 0.030-0.055 0.046-0.013 0.012-0.026 0.025-0.038 0.038-0.017 0.017-0.033 0.034-0.048 0.053-0.012 0.014-0.022 0.027-0.033 0.042-0.014 0.019-0.028 0.039-0.041 0.059-0.009 0.015-0.019 0.030-0.027 0.045-0.012 0.021-0.023 0.042-0.033 0.064-0.007 0.016-0.015 0.031-0.022 0.047-0.010 0.023-0.018 0.047-0.025 0.070-0.005 0.016-0.011 0.031-0.015 0.047-0.007 0.027-0.012 0.054-0.017 0.081-0.003 0.014-0.006 0.028-0.008 0.042-0.005 0.042-0.009 0.084-0.009 0.126v6.86c0 0.043 0.003 0.085 0.009 0.126 0.002 0.014 0.005 0.028 0.008 0.042 0.005 0.027 0.010 0.054 0.017 0.081 0.004 0.016 0.010 0.031 0.015 0.047 0.008 0.024 0.016 0.047 0.025 0.071 0.006 0.016 0.014 0.031 0.022 0.047 0.010 0.022 0.021 0.043 0.033 0.065 0.009 0.015 0.018 0.030 0.027 0.044 0.013 0.020 0.026 0.040 0.041 0.059 0.011 0.015 0.022 0.028 0.033 0.042 0.015 0.018 0.031 0.035 0.048 0.052 0.012 0.013 0.025 0.026 0.038 0.038 0.017 0.016 0.036 0.031 0.055 0.046 0.014 0.011 0.029 0.023 0.044 0.033 0.006 0.004 0.010 0.008 0.016 0.012l10.29 6.86c0.163 0.108 0.349 0.163 0.537 0.163s0.374-0.054 0.537-0.163l10.29-6.86c0.006-0.004 0.011-0.008 0.016-0.012 0.015-0.011 0.029-0.022 0.044-0.033 0.019-0.015 0.037-0.030 0.055-0.046 0.013-0.012 0.026-0.025 0.039-0.038 0.017-0.017 0.033-0.034 0.048-0.052 0.012-0.014 0.023-0.027 0.033-0.042 0.014-0.019 0.028-0.039 0.041-0.059 0.009-0.015 0.019-0.029 0.028-0.044 0.012-0.021 0.023-0.043 0.033-0.065 0.007-0.015 0.015-0.031 0.022-0.047 0.010-0.023 0.017-0.047 0.025-0.071 0.005-0.016 0.011-0.031 0.015-0.047 0.007-0.027 0.012-0.054 0.017-0.081 0.002-0.014 0.006-0.028 0.008-0.042 0.005-0.042 0.009-0.084 0.009-0.126v-6.86c0-0.043-0.003-0.085-0.009-0.126-0.002-0.014-0.005-0.028-0.008-0.042zM16 18.575l-3.422-2.289 3.422-2.289 3.422 2.289-3.422 2.289zM15.033 12.316l-4.195 2.806-3.386-2.265 7.581-5.054v4.513zM9.098 16.286l-2.42 1.619v-3.238l2.42 1.619zM10.838 17.45l4.195 2.805v4.513l-7.581-5.054 3.386-2.265zM16.967 20.255l4.195-2.805 3.386 2.265-7.581 5.054v-4.513zM22.902 16.286l2.421-1.619v3.238l-2.421-1.619zM21.162 15.122l-4.195-2.806v-4.513l7.581 5.054-3.386 2.265z"
/>
</svg>"Codepen" icon from Devicons (https://vorillaz.github.io/devicons/), licensed under MIT license.